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

Question

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

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

更新： 虽然我认为我已经提供了足够的 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

这样做，将 "Image" 替换为实际图像

<html>
<head>
<style>
th:nth-child(2n+1) span {
    background: #E4E4E4;
}
th{
    -webkit-transform: rotate(270deg);
    
 height: 50px;
 
}

td:nth-child(2n+1) {
    background: #E4E4E4;
}
td {
    width: 50px;
    height: 50px;
 border-top:solid 1px #acacac;
}
</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
<tr>
<th><span>Brush</span></th><th><span>Roll</span></th><th><span>Spray</span></th><th><span>Liquid</span></th>
</tr>
<tr>
<td>Image</td><td>Image</td><td>Image</td><td>Image</td>
</tr>
<tr>
<td>Image</td><td>Image</td><td>Image</td><td>Image</td>
</tr>
</table>
</body>
</html>

Answer 2

您正在尝试自己旋转 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>

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

Fill Entire Rotated <th> with Background Color

html

css

background-color

css-tables