html - 使一个 div 填充具有未指定尺寸的表格单元格的整个宽度和高度

Question

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 年。我们将不胜感激。

Answer 1

如果您对几个类(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>