html - Html 表 - 不确定如何单独调整某些的大小

Question

好奇如何在不调整整行高度的情况下使 TD 单元格更大？我知道我可以使用“rowspan = 7”进行内联样式设置，但这会将数据集中在单元格的中间。

我正在尝试构建一个像这张图片一样的表格，但不知道如何调整“某些数据”和“其他数据”单元格的大小。

table {
  text-align: center;
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 30vw;
  border: 1px solid black; 
}

<table>
  <tr>
    <td></td>
    <td>Heading</td>
    <td>Heading 2</td>
  </tr>
  <tr>
    <td rowspan="8">Some Data</td>
    <td>546</td>
    <td>X</td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td>X</td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td>X</td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="8">Other Data</td>
    <td>123</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
</table>

Answer 1

只需将一个类添加到具有行跨度的表格单元格。我使用了类：.rowspan. 然后使用css声明：vertical-align: top;问题就解决了。

table {
  text-align: center;
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 30vw;
  border: 1px solid black; 
}

.rowspan {
  vertical-align: top;
}

<table>
  <tr>
    <td></td>
    <td>Heading</td>
    <td>Heading 2</td>
  </tr>
  <tr>
    <td rowspan="8" class="rowspan">Some Data</td>
    <td>546</td>
    <td>X</td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td>X</td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td>X</td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td>546</td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="8" class="rowspan">Other Data</td>
    <td>123</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
</table>