为啥表格需要 width:0 来尊重列宽？

Posted 2023-05-08

【中文标题】为啥表格需要 width:0 来尊重列宽？

【英文标题】：Why does table need width:0 to respect column widths?为什么表格需要 width:0 来尊重列宽？

【发布时间】：2019-01-20 11:02:39

【问题描述】：

此表格的列宽为 59px 和 100px，即使 50px 和 100px 是指定的列宽。

table 
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;


col:first-child 
  width: 50px;


col:nth-child(2) 
  width: 100px;


td, th 
  border: 1px solid black;

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

但如果我将width: 0 添加到表中，它就可以工作。

table 
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 0;


col:first-child 
  width: 50px;


col:nth-child(2) 
  width: 100px;


td, th 
  border: 1px solid black;

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

为什么需要设置width: 0？有没有更好的办法？>

【问题讨论】：

用于<th> word-break: break-word; 断词

@Observer，但我不一定要断词。后一个例子不会断词。

Set the table column width constant regardless of the amount of text in its cells?的可能重复

【参考方案1】：

您可以将max-width 属性设置为<th> 元素。此外，您需要指定 box-sizing: border-box; 到 <th> 和 <td> 元素以包含填充和边框

table 
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;


th:first-child 
  max-width: 50px;
  width: 50px;


th:nth-child(2) 
  max-width: 100px;
  width: 100px;


td, th 
  border: 1px solid black;
  box-sizing: border-box; 

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

【参考方案2】：

CSS 2.2 Section 17.5.2.1 Fixed table layout 说：

表格的宽度可以用'width'属性明确指定。 'auto' 的值（对于 'display: table' 和 'display: inline-table'）意味着使用自动表格布局算法。¹

宽度的初始值是 auto 并且用户代理样式表确实改变了表格元素的这个值。所以尽管css是table-layout: fixed，但还是使用了自动表格布局算法，而不是固定表格布局算法。将宽度设置为其他值会强制使用固定表格布局算法。

对此没有明显“更好”的解决方案。

---

_{¹它接着说浏览器没有有这样做，但似乎他们还是这样做了}

【参考方案3】：

也许你可以看看word-break。

table 
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;


col:first-child 
  width: 50px;


col:nth-child(2) 
  width: 100px;


td, th 
  border: 1px solid black;
  word-break:break-word;

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>