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

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/