如何使用 bootstrap 对齐子表 4+答案

【问题标题】：How do I align child table using bootstrap 4+如何使用 bootstrap 对齐子表 4+
【发布时间】：2020-03-25 22:49:06
【问题描述】：

我有一个在父表内的表。我需要把它设计得很好，这样它才能在整个屏幕上水平延伸。

基本上，无论行中的单元格数量如何，我都希望内表的宽度为屏幕大小的 100%。

HTML 小提琴：https://jsfiddle.net/eugensunic/7Lamvwf1/3/

 <table class="table table-bordered table-hover">
  <tr>
    <td>cell10</td>
    <td>cell 11</td>
    <td>cell 11</td>
    <td>cell 11</td>
    <td>cell 11</td>
  </tr>
  <tr>
    <td class="">
      <table class="table">
        <tr>
          <td>Nested 1a</td>
          <td>Nested 2a</td>
          <td>Nested 3a</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【问题讨论】：

我希望内表的宽度为屏幕尺寸的 100% 为什么不直接更改标记并将其放在另一个表的下方？或者干脆使用colspan="100%"
通过改变标记我猜你会删除内部表格标签。如果是，那么我不想要那个。否则，请重新定义答案中的标记
@ZohirSalak colspan 有效，但如果可能的话想避免它
这就是为什么我建议将桌子移到另一个之外，否则我认为没有另一种方法可以跨越 col
@ZohirSalak 我会选择 colspan。

标签： html css twitter-bootstrap html-table

【解决方案1】：

首先，您应该将第一个 tr 中的第一个 td 替换为 th ，因为在您使用 td 或在子表中的第二个 td，cell10 将是该子表的父级，因此即使您在样式 css 上使用绝对位置并尝试将宽度固定为 1000 像素，例如 cell10 将当我向你解释时，自动跟随子表，所以在 td

上使用 colspan="100%"

【讨论】：