用背景颜色填充整个旋转

Question

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

根据线框的要求，<th>文字旋转270度，这也需要斑马条纹＆＃34;具有灰色背景的所有偶数列。 <td>完全填充背景区域，但旋转的<th>仅填充文本背后的背景。我按照其他未旋转的th示例的建议应用了100％的高度无效，尝试添加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

你试图自己轮换 <?php if(!empty($nameErr)) { ?> <div class="under_text_error"> <?php echo $nameErr ?> </div> <?php } ?> ，对吧？馊主意。 th s本身只会与未旋转的高度一样宽 所以一个解决方案，但只有当你知道th都具有相同的宽度时，才能给td s那个高度。

更好的解决方案是在th s中添加一些div并旋转它们。然后你不依赖于所有宽度相同的单元格。

th

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;
}

Answer 2

这样做，替换＆＃34;图像＆＃34;与实际图像

＆＃13;

＆＃13;

df<-ndjson::stream_in('events_data.json')

＆＃13;

＆＃13;

＆＃13;