如何在HTML中实现3列嵌套3列的表格布局？求助

嘿，我懂你想实现的那种外层3列、每列里再塞3个小列的表格效果～你之前的尝试踩了个HTML结构的坑：不能在<th>标签里直接嵌套<tr>，这不符合表格的规范，浏览器会自动修正这个错误的嵌套结构，所以结果肯定和你预期的不一样。

下面给你两种符合需求的实现方式，你可以根据实际场景选：

方式1：主表头跨列对应下方子列 #

如果你的需求是「3个主表头，每个表头对应下方3个并列的子内容列」，用colspan属性来合并表头单元格就可以了，这是最常用的表格分组方式：

<table border="1">
  <!-- 主表头行：每个表头跨3列 -->
  <tr>
    <th colspan="3">Heading1</th>
    <th colspan="3">Heading2</th>
    <th colspan="3">Heading3</th>
  </tr>
  <!-- 子内容行：9个单元格对应3组 -->
  <tr>
    <td>idk</td>
    <td>idk1</td>
    <td>idk2</td>
    <td>abc</td>
    <td>abc1</td>
    <td>abc2</td>
    <td>xyz</td>
    <td>xyz1</td>
    <td>xyz2</td>
  </tr>
</table>

方式2：表头单元格内嵌套表格 #

如果你的需求是「每个主表头单元格本身就包含3个小单元格」，那就在<th>里嵌套一个完整的表格结构（注意要把嵌套的表格包裹好）：

<table border="1">
  <tr>
    <th>
      <!-- 嵌套的子表格 -->
      <table border="1">
        <tr>
          <td>idk</td>
          <td>idk1</td>
          <td>idk2</td>
        </tr>
      </table>
    </th>
    <th>
      <table border="1">
        <tr>
          <td>abc</td>
          <td>abc1</td>
          <td>abc2</td>
        </tr>
      </table>
    </th>
    <th>
      <table border="1">
        <tr>
          <td>xyz</td>
          <td>xyz1</td>
          <td>xyz2</td>
        </tr>
      </table>
    </th>
  </tr>
</table>

这两种方式都能实现你要的「3列嵌套3列」的效果，你可以根据自己的实际需求来选哦～

内容的提问来源于stack exchange，提问作者SenTisso