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

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

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

Answer 2

您已在单元格内的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 3

简单的答案确实是通过您在其他地方使用的类来设置单元格的背景。

对于宽度，下面有两个选项

你也可以使用写入模式属性（很久以前它用作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 demo

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

[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 demo

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

3 个答案: