如何为html中所有标题中的一个标题创建表子标题答案

【问题标题】：How to create a table sub header for only one header of all the headers in html如何为html中所有标题中的一个标题创建表子标题
【发布时间】：2017-10-06 04:18:09
【问题描述】：

您好，我必须创建一个如下图所示的表格。

请帮我拿到那张桌子。我正在做 Angular 4 项目

【问题讨论】：

标签： html html-table

【解决方案1】：

您可以在 HTML 中合并单元格宽度colspan（水平）和rowspan（垂直）属性。

因此您可以为标题创建 2 行。在那些没有子标题的列中，使用rowspan=2 垂直合并。在表头有两行的地方，在第一行使用colspan=X在子表头上方水平合并：

table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background: grey;
  border: 1px solid white;
  padding: 0;
  text-align: center;
}

<table>
  <tr>
    <th rowspan="2">Simple header</th>
    <th colspan="2">Combo header</th>
  </tr>
  <tr>
    <!-- skip 1st column because it merges vertically -->
    <th>Sub 1</th>
    <th>Sub 2</th>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

【讨论】：