Html 表 - 不确定如何单独调整某些 <td> 的大小答案

【问题标题】：Html table - Not sure how to size certain <td>'s individuallyHtml 表 - 不确定如何单独调整某些 <td> 的大小
【发布时间】：2021-02-02 22:41:45
【问题描述】：

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

我正在尝试构建一个像这张图片一样的表格，但不知道如何调整 “Some Data” 和 “Other Data” 单元格的大小......

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>

【问题讨论】：

请添加您尝试过的 HTML 和 CSS，我们或许可以帮助您修复它。
@MarkSchultheiss 应该添加代码是正确的。但是，这不是必需的，因为该问题的整个解决方案很简单：vertical-align: top;。在这里询问的几乎是基本的 HTML/CSS。
这应该被投票为重复并关闭然后也许而不是回答
这里至少有一个答案是重复的stackoverflow.com/q/3830930/125981
只是一个迂腐的注解：“使行/列更大”与“跨越多行/列”不同

标签： html css html-table bootstrap-table

【解决方案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>

【讨论】：