仅当设置表格宽度时才在表格上水平滚动？答案

【问题标题】：Horizontal scroll on table only when width of table set?仅当设置表格宽度时才在表格上水平滚动？
【发布时间】：2021-07-04 23:30:23
【问题描述】：

我想制作一个包含可水平滚动的表格的 div。只有在表格标签上设置了宽度而不是 td-tags 时才有效。这是为什么呢？

摆弄不工作的滚动

<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>

摆弄工作滚动（表格标签上的宽度）

<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>

【问题讨论】：

标签： html scrollable

【解决方案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>

【讨论】：