Bootstrap 4.1.3嵌套表格Colspan失效问题求助

嘿，我懂你遇到的糟心事了——明明给父单元格设了colspan，嵌套表格却死活撑不满整个宽度，就算把表格包进div里也没效果。咱们来一步步把这个问题搞定！

先看看你提供的代码片段：

<tr>
  <td id="order1000" class="card-body table-responsive collapse" colspan="6">
    <table class="table">
      <thead>
        <tr>
          <th>Product</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Video 1</td>
          <td>Desc 1</td>
          <td>$20.00</td>
        </tr>
        <tr>
          <td>Video 2</td>
          <td>Desc 2</td>
          <td>$5.00</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

问题根源在哪？ #

1. 默认情况下，<table>元素的宽度是由自身内容决定的，不会自动继承父单元格的宽度——哪怕父td用了colspan，也没法强制嵌套表格撑满。
2. 你给父td加了table-responsive类，这个类本来是给表格外层容器做响应式滚动用的，它自带的padding和overflow样式，反而会限制嵌套表格的宽度扩展。

具体解决方案 #

我给你两个关键调整：

• 给嵌套的.table添加width: 100%样式，强制它铺满父容器的宽度；
• 移除父td上的table-responsive类（如果需要响应式效果，应该把这个类加在嵌套表格的外层div上，而不是td本身）。

修改后的代码如下：

<tr>
  <td id="order1000" class="card-body collapse" colspan="6">
    <table class="table" style="width: 100%;">
      <thead>
        <tr>
          <th>Product</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Video 1</td>
          <td>Desc 1</td>
          <td>$20.00</td>
        </tr>
        <tr>
          <td>Video 2</td>
          <td>Desc 2</td>
          <td>$5.00</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

如果不想用内联样式，也可以写个自定义CSS类：

.full-width-table {
  width: 100% !important;
}

然后给嵌套表格加上这个类：<table class="table full-width-table">

这样调整后，嵌套表格就能完美铺满父单元格的整个宽度了～

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