为何CSS中max-width属性对table元素不生效？

我之前一直以为让表格自适应容器宽度是件挺简单的事，结果实际操作时却卡壳了！我给table设置了如下样式和结构：

CSS代码 #

table {
  width: 537px;
  height: 19px;
  max-width: 100%;
}

HTML代码 #

<table>
  <tr>
    <td style="background-color: #ffe129;">text</td>
    <td style="background-color: #bdff4d;">text</td>
  </tr>
</table>

问题来了：哪怕把窗口宽度缩到400px，表格还是死死保持537px的宽度，换成div元素的话早就自动缩到400px了。我试着给table加了display:block样式，结果表格布局直接错乱了。

可行的解决方案 #

其实表格的max-width属性表现和块级元素不一样，因为表格默认的布局规则是优先适配单元格内容的。要实现自适应容器宽度的同时不破坏表格布局，可以试试这两种方法：

• 方法一：用width: 100%替代固定宽度
  把table的width设置为100%，去掉固定的537px，这样表格会自动填满容器，同时保持表格布局：

  table {
    width: 100%;
    height: 19px;
  }
  

• 方法二：结合容器和table-layout: fixed
  如果必须保留固定宽度作为上限，可以把table放在一个块级容器里，给容器设置max-width: 100%，同时给table设置table-layout: fixed强制按容器宽度布局：

  <div style="max-width: 100%;">
    <table style="width: 537px; height: 19px; table-layout: fixed;">
      <tr>
        <td style="background-color: #ffe129;">text</td>
        <td style="background-color: #bdff4d;">text</td>
      </tr>
    </table>
  </div>
  

  table-layout: fixed会让表格优先使用指定的宽度，而不是被单元格内容撑开，这样max-width就能正常生效了。

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