如何移除HTML嵌套表格中内层table的外边框

要让内层表格完全贴合外层<th>、消除蓝色背景露出的问题，只需调整两个关键样式：

• 移除包含内层表格的外层<th>的内边距
• 强制内层表格占满外层<th>的宽度

修改后的代码 #

CSS 部分

table {
  color: white;
  border-collapse: collapse;
  border: none;
}

th {
  padding: 10px;
  text-align: center;
}

td {
  background-color: olive;
  padding: 10px;
  text-align: center;
}

/* 让内层表格占满外层表头宽度 */
th > table {
  width: 100%;
}

/* 移除带内层表格的外层表头内边距 */
th.has-inner-table {
  padding: 0;
}

HTML 部分

<table>
  <tr>
    <th style="background-color:green">A</th>
    <!-- 添加自定义类用于移除内边距 -->
    <th style="background-color:blue" class="has-inner-table">
      <table>
        <tr>
          <th style="background-color:maroon" colspan="2">B</th>
        </tr>
        <tr>
          <th style="background-color:red">x</th>
          <th style="background-color:orange">y</th>
        </tr>
      </table>
    </th>
    <th style="background-color:purple">C</th>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
  <tr>
    <td>250</td>
    <td>550</td>
    <td>670</td>
  </tr>
</table>

原理说明 #

1. 外层<th>原本的padding:10px是蓝色背景露出的核心原因，设置padding:0后，内层表格直接填充整个表头区域。
2. 内层表格的width:100%确保其宽度完全匹配外层表头，避免横向空隙。
3. 内层<th>的padding:10px会保留，作为复合表头的内边距，保证内容不会紧贴边框。

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