旋转文本单元格中的背景颜色大小不正确

Question

我在表格单元格中旋转了文本，但背景颜色没有填充单元格。我搜索了StackOverflow，并尝试了几乎所有的答案但都无济于事。以下是JSFiddle：https://jsfiddle.net/eoar08fx/

HTML:

<td rowspan='4'>
     <div class='vertical-text'>Activities</div>
</td>

CSS：

.vertical-text {
color: #FFFFFF;
background-color: #2E9AFE;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* accepts left, right, top, bottom */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* do not set in IE9+? */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
}

谢谢你的任何提示或要点。

Answer 1

您已经在单元格内的div上设置了背景，而不是在单元格上，您需要将背景颜色应用于td并在div 内旋转文本

<td rowspan='4' class='vertical-text'>
     <div >Activities</div>
</td>

和

.vertical-text  {
   color: #FFFFFF;
   background-color: #2E9AFE;
   }
.vertical-text div {
    -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
   /* accepts left, right, top, bottom */
   -webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   -o-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   /* do not set in IE9+? */
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
   }

https://jsfiddle.net/grassog/51mhy9qe/1/

Answer 2

尝试将您创建的cell-blue CSS类属性应用于td，而不是包含文本本身的div。

它应该填充td，而不是只填充div。

Answer 3

简单的答案实际上是通过您使用的else-where类来设置单元格的背景。

---

对于宽度，下方有2个选项

---

你也可以使用写作模式属性（很久以前它是IE 5的一个功能）。它可能会避免处理该单元格的宽度。

https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode

https://msdn.microsoft.com/library/ms531187%28v=vs.85%29.aspx

.vertical-text {
  margin:0 0 0 1em;
  line-height:0.5em;
  max-height:4em;
  font-size: 2em;
  color: #FFFFFF;
  text-align:center;
  -webkit-writing-mode:vertical-lr;/* old windows safari */
  writing-mode:vertical-lr;
  writing-mode:tb-lr;
  direction:ltr;
  transform:scale(-1,-1);/* orientation can be reversed */
}
.cell-blue {
  color: #FFFFFF;
  background-color: #2E9AFE;
}
.cell-grey {
  color: #DEF0F6;
  background-color: #D8D8D8;
}
td.wide-cell {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  height: 45px;
  width: 300px;
}
td.short-cell {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  height: 45px;
  width: 70px;
}
.centered-cell {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  width: 70px;
}

<table border="1" cellpadding="0" cellspacing="0" style="margin-left:30px; text-align:center; vertical-align:middle;">
   <tr>
      <td colspan="2" class="wide-cell cell-blue">
         DATE
      </td>
      <td class="short-cell cell-blue">
         YTD
      </td>
      <td class="short-cell cell-blue">
         Q1
      </td>
      <td class="short-cell cell-blue">
         Q2
      </td>
      <td class="short-cell cell-blue">
         Q3
      </td>
      <td class="short-cell cell-blue">
         Q4
      </td>
   </tr>
   <tr>
      <td rowspan='4' class='cell-blue'><!-- it deserves the cell-blue class doesn't it ? */
         <div class='vertical-text'>Activities</div>
      </td>
      <td class='left-cell cell-blue'>
         Setup Y/N
      </td>
      <td class='centered-cell cell-grey'>
         <div id='setupYTD'></div>
      </td>
      <td class='centered-cell cell-grey'>
         <div id='setupQ1'></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id='setupQ2'></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id='setupQ3'></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id='setupQ4'></div>
      </td>
   </tr>
   <tr>
      <td class="left-cell cell-blue">
         Objectives
      </td>
      <td class="centered-cell cell-grey">
         <div id="objYTD"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ1"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ2"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ3"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ4"></div>
      </td>
   </tr>
   <tr>
      <td class="left-cell cell-blue">
         Project
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentYTD"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ1"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ2"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ3"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ4"></div>
      </td>
   </tr>
   <tr>
      <td class="left-cell cell-blue">
         Outcome
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeYTD"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ1"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ2"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ3"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ4"></div>
      </td>
   </tr>
</table>

codepen演示

---

或者使用负裕度和伪来确保它达到所需的高度：

[rowspan] {/*whatever selector you want to use ,  vertical-text class could be set onto the cell to make things easier :) */
  min-width:1em;
  vertical-align:bottom;/* decide to start from bottom or top to not mind text length */
  
}
.vertical-text {
  font-size: 2em;
  line-height:1.5em;
  color: #FFFFFF;
  float:left;
  margin-right:-999px;/* reduce width virtually to very little */
  transform:rotate(-90deg) translate(-50%,0);/* rotate and replace */
  transform-origin:top left;
}
.vertical-text:before{/* here we go look for the height the text is suppose to use */
  content:'';
  float:left;
  padding-top:100%;/* might be increased a little */
}
/* regular stuff */
.cell-blue {
  color: #FFFFFF;
  background-color: #2E9AFE;
}
.cell-grey {
  color: #DEF0F6;
  background-color: #D8D8D8;
}
td.wide-cell {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  height: 45px;
  width: 300px;
}
td.short-cell {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  height: 45px;
  width: 70px;
}
.centered-cell {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  width: 70px;
}

<table border="1" cellpadding="0" cellspacing="0" style="margin-left:30px; text-align:center; vertical-align:middle;">
   <tr>
      <td colspan="2" class="wide-cell cell-blue">
         DATE
      </td>
      <td class="short-cell cell-blue">
         YTD
      </td>
      <td class="short-cell cell-blue">
         Q1
      </td>
      <td class="short-cell cell-blue">
         Q2
      </td>
      <td class="short-cell cell-blue">
         Q3
      </td>
      <td class="short-cell cell-blue">
         Q4
      </td>
   </tr>
   <tr>
      <td rowspan='4' class='cell-blue'>
         <div class='vertical-text'>Activities</div>
      </td>
      <td class='left-cell cell-blue'>
         Setup Y/N
      </td>
      <td class='centered-cell cell-grey'>
         <div id='setupYTD'></div>
      </td>
      <td class='centered-cell cell-grey'>
         <div id='setupQ1'></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id='setupQ2'></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id='setupQ3'></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id='setupQ4'></div>
      </td>
   </tr>
   <tr>
      <td class="left-cell cell-blue">
         Objectives
      </td>
      <td class="centered-cell cell-grey">
         <div id="objYTD"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ1"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ2"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ3"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="objQ4"></div>
      </td>
   </tr>
   <tr>
      <td class="left-cell cell-blue">
         Project
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentYTD"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ1"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ2"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ3"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="assessmentQ4"></div>
      </td>
   </tr>
   <tr>
      <td class="left-cell cell-blue">
         Outcome
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeYTD"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ1"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ2"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ3"></div>
      </td>
      <td class="centered-cell cell-grey">
         <div id="outcomeQ4"></div>
      </td>
   </tr>
</table>

codepen演示