如何在html表格中设置表头

Question

我正在使用 HTML 表格，需要以某种方式创建标题。

我想要的结果如下图所示。但我在使用 HTML 和 CSS 获得此结果时遇到困难。

到目前为止，我有下面的代码，但结果并不完全正确。

如何修改我的代码以获得所需的结果？

table{

  border-collapse: collapse;

  border: solid black 1px;

}

td {

  border: solid black 1px;

  padding: 5px;

}

<table>

  <tbody>

      <tr>

        <th rowspan="2">head</th>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

      </tr>

      <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

      </tr>

  </tbody>

</table>

Answer 1

您可以删除边框table并将其专门添加到th. 您可以删除该rowspan属性并使用 aclass代替。我添加了第二个th，仅用作垫片。table {&nbsp; border-collapse: collapse;}td,.hz-header {&nbsp; border: solid black 1px;&nbsp; padding: 5px;}<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th class="hz-header">head</th>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

您可以通过删除该属性并在下一行中rowspan使用空填充符来实现此目的。th然后只需在可见th( th.label) 上设置边框并删除table.完整示例：table{&nbsp; border-collapse: collapse;}th,td {&nbsp; padding: 5px;}th.label,td {&nbsp; border: solid black 1px;}<table>&nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="label">head</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; </tbody></table>