table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
div {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td rowspan="2"> <div>four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>期望的结果是表格单元格中的 div 看起来更像
这个:
请注意“四个”div 填满了图像中表格单元格的整个宽度和高度，但代码片段中没有。
有类似的问题建议使用绝对定位，在这种情况下(根据我的尝试)在未指定宽度和高度的表格上不起作用。其他答案说没有 JavaScript 就无法做到这一点。但这些答案来自 2010 年。我们将不胜感激。
最佳答案
如果您对几个类(class)没问题，那么您可以实现图中所示的效果。
table,
th,
td,
div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
.spl {
writing-mode: vertical-rl;
border-style: none;
}
.inb {
background-color: #ddd;
}<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td rowspan="2" class="inb">
<div class="spl">four</div>
</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
</tr>
</table>https://stackoverflow.com/questions/64528710/
相关文章：
reactjs - typescript 错误对象的类型为 'unknown'
github - 避免从 raw.githubusercontent.com 获取缓存内容
vue.js - 使用 vue 的故事书 - SassError : Undefined varia
android - x + 宽度必须 <= bitmap.width()
python - 'google-api-python-client' distribution 在
css - 使用 Inset 的 React Native Complex Shadow
python - 在 matplotlib 中分段更改 x 轴刻度