如何实现td内的满宽嵌套行？当前实现遇阻求助

嘿，我来帮你搞定这个嵌套表格没法占满父td宽度的问题～

默认情况下，嵌套的<table>不会自动撑满父<td>的宽度，原因主要有两个：一是table的默认宽度由内部内容决定，二是父td可能自带padding（比如Bootstrap的表格默认就有内边距），导致嵌套表格被挤得没法完全占满。

给你几个可行的解决办法：

1. 直接用内联样式快速调整 #

这是最直接的方式，一步到位：

<td style="padding: 0;">
  <table class="table table-striped" style="width: 100%;">
    <tr>
      <td colspan="3">I am nested in a table column</td>
      <td colspan="3">I am also nested in a table column</td>
    </tr>
    <tr>
      <td colspan="3">I am nested in a table column</td>
      <td colspan="3">I am also nested in a table column</td>
    </tr>
  </table>
</td>

给嵌套表格加width:100%让它继承父td的宽度，父td加padding:0是为了消除默认内边距对宽度的影响。

2. 用自定义CSS类（更优雅的复用方式） #

如果不想用内联样式，可以写个自定义CSS类，方便多处复用：

/* 让嵌套表格占满父元素宽度 */
.nested-table-full-width {
  width: 100% !important;
}

/* 清除父td的内边距 */
.td-no-padding {
  padding: 0 !important;
}

然后把类加到对应元素上：

<td class="td-no-padding">
  <table class="table table-striped nested-table-full-width">
    <tr>
      <td colspan="3">I am nested in a table column</td>
      <td colspan="3">I am also nested in a table column</td>
    </tr>
    <tr>
      <td colspan="3">I am nested in a table column</td>
      <td colspan="3">I am also nested in a table column</td>
    </tr>
  </table>
</td>

额外注意点 #

• 如果外层表格设置了固定宽度，要确保父td的宽度是合理的（别给父td设过小的固定宽度），否则嵌套表格即使设了100%也只能跟着父td的宽度走。
• Bootstrap的.table类默认有margin-bottom，如果不需要多余间距，可以给嵌套表格加上margin-bottom: 0;的样式。

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