标签 COLGROUP 如何与两个 col=100% 一起使用？答案

【问题标题】：How tag COLGROUP works with two col=100%?标签 COLGROUP 如何与两个 col=100% 一起使用？
【发布时间】：2018-04-10 23:39:26
【问题描述】：

我用COLGROUP排表，发现了一个看不懂的场景，请谁能告诉我COLGROUP的工作原理：

我给表格添加WIDTH属性，宽度等于100%的两个COL可以显示为50%，50%

enter image description here

我删除了 WIDTH 属性，布局发生了变化，并且布局超出了我们的控制范围： enter image description here

请任何人都可以告诉为什么这两种方式呈现不同的布局？

【问题讨论】：

请将您的代码放入问题中，格式为代码，而不是图像
在您的代码中，body 是 table 的父级，因此它采用 width:100%;，您需要在包含一定宽度的任何特定 div 内写入 table。

标签： html css html-table

【解决方案1】：

在您的代码中，<body> 是表的父级，因此它采用 width:100%;，您需要在包含一定宽度的任何特定 div 内写入表

这样，你就试试吧。

<body>
  <div class="table-container" style="width: 500px;">
    <table style="table-layout: fixed">
      <colgroup>
      <col width="50px">
      <col width="100%">
      <col width="50px">
      <col width="100%">
      </colgroup>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
  </div>
</body>

【讨论】：

感谢 Minal Chauhan，Meraj Khan！我还是想知道为什么[table width as width=100%]和[table width as width=500]会产生不同的布局？我想了解更多关于 TABLE 如何渲染它。
如果你给出特定的宽度，那么这个宽度将被计算，否则默认情况下width: 100%;工作。阅读有关表 css-tricks.com/complete-guide-table-element 的信息
如果有用，谢谢。 :)
谢谢你，但我很惊讶当指定表格宽度时，两个 col[width=100%] 将被计算为剩余宽度的 50% 50%。