html - 用背景颜色填充整个旋转的 <th>

Question

这是我以前从未遇到过的问题，在 Stack Overflow 或其他地方也看不到任何答案。这是我正在创建的比较图表的截屏摘录:

根据线框图的要求，<th>文本旋转 270 度，这也需要对所有偶数列的灰色背景进行“斑马条纹”。 <td> s 完美填充背景区域，但旋转的 <th>仅填充文本后面的背景。我按照其他未旋转的建议应用了 100% 的高度 th示例，无济于事，并且尝试添加 100% 的宽度会使整个表格消失。必须有一个简单的解决方案，否则我无法找到。非常感谢您提供的任何建议。

更新:虽然我认为我已经提供了足够的 CSS 来解释我的问题，但根据要求，这里是为这个旋转的 th 应用的相关样式。 :

th.headertext {
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    text-align: left;
    bottom: 56px;
    position: relative;
}

td:nth-child(even), th:nth-child(even) {
    background-color: #efefef;
}

th {
    font-size: 16px;
    font-weight: bold;
    height: 100%;
    line-height: 100%;
}

td, th {
    text-align: center;
    border-bottom: solid 1px #ccc;
    font-size: 12px;
    padding: 6px;
    word-wrap: break-word;
}

Answer 1

您正在尝试旋转 th 本身，对吧？馊主意。 th 本身的宽度将与其未旋转的高度一样宽。
所以一个解决方案，但前提是您知道 td 都具有相同的宽度，就是给 th 那个高度。

一个更好的解决方案是在第 th 中放置一些 div 并旋转它们。这样您就不会依赖于所有单元格的宽度都相同。

table {
  border-spacing: 0;
  border-top:1px solid #ccc;
}

th.headertext div {
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height:4em;
}

td:nth-child(even), th:nth-child(even) {
    background-color: #efefef;
}

th {
    font-size: 16px;
    font-weight: bold;
    /*height: 100%;*/
    /*line-height: 100%;*/
}

td, th {
    text-align: center;
    border-bottom: solid 1px #ccc;
    font-size: 12px;
    padding: 6px;
    word-wrap: break-word;
}

<table>
  <tr>
    <th class="headertext"><div>left</div></th>
    <th class="headertext"><div>middle</div></th>
    <th class="headertext"><div>right</div></th>
  </tr>
  <tr>
    <td>left</td>
    <td>middle</td>
    <td>right</td>
  </tr>
</table>