仅当设置 table 的宽度时才在 table 上水平滚动？

Question

我想制作一个 div，其中包含一个可水平滚动的 table。只有在 table 标签而非 td-tags 上设置宽度时才有效。这是为什么？

Fiddle 滚动条无效

<div style="width:300px;background-color:grey;padding:5px">
  <div style="width:100%;overflow:scroll;background-color:yellow;">
    <table style="background-color:red">
      <tr>
        <td style="width:400px">TESTING</td>
      </tr>
    </table>
  </div>

</div>

Fiddle 带工作卷轴（table 标签上的宽度）

<div style="width:300px;background-color:grey;padding:5px">
  <div style="width:100%;overflow:scroll;background-color:yellow;">
    <table style="background-color:red;width:400px">
      <tr>
        <td>TESTING</td>
      </tr>
    </table>
  </div>

</div>

Answer 1

尝试在 table

上添加 width:100% 和 table-layout: fixed

<div style="width:300px;background-color:grey;padding:5px">
  <div style="width:100%;overflow:scroll;background-color:yellow;">
    <table style="background-color:red; width:100%; table-layout: fixed;">
      <tr>
        <td style="width:400px">TESTING</td>
      </tr>
    </table>
  </div>

</div>

仅当设置 table 的宽度时才在 table 上水平滚动？

Horizontal scroll on table only when width of table set?

html

scrollable