如何让div内表格的overflow-x属性正常生效？

问题 #

我一直没法实现表格在容器内正常显示的效果：要么浏览器直接忽略<td>的宽度设置，要么整个表格直接超出外层div的范围。

原代码示例 #

<div>
  <div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
    <h2>忽略td宽度：</h2>
    <table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
  <div style="width:50%;background-color:#ccc" style="overflow-x:scroll">
    <h2>忽略overflow-x属性：</h2>
    <table border="1" width="2000px">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
</div>

问题分析 #

1. 多style属性无效：两个外层div都写了重复的style属性，HTML元素不允许重复属性，浏览器只会解析最后一个，导致width:50%失效，容器宽度失控。
2. 表格display设置错误：第一个表格加了display:block，直接破坏表格原生布局机制，table-layout:fixed无法正常作用，<td>的宽度自然被忽略。
3. overflow属性位置错误：把overflow-x:scroll加在表格上没用，应该加在包裹表格的父容器上，才能让容器承担滚动功能。

修正后的代码 #

<div>
  <div style="width:50%;background-color:#ccc;overflow-x:auto">
    <h2>td宽度生效且可滚动：</h2>
    <table border="1" style="table-layout:fixed;min-width:2400px">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
</div>

关键修改点 #

• 合并div的多个style属性为一个，确保所有样式生效
• 移除表格的display:block，保留原生表格布局
• 给表格设置min-width:2400px（6个400px的td总和），确保表格总宽度超过容器，触发父容器滚动
• 把overflow-x:auto设置在父容器上，让容器提供横向滚动条
• 保留table-layout:fixed，确保<td>的宽度设置严格生效

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