为td和th设置200px固定宽度无效，如何实现表格横向滚动？

我明白你遇到的困扰了——明明给td和th设置了200px宽度，但表格还是挤在一起，完全没达到预期效果。这其实是表格默认布局规则在搞鬼，咱们来一步步搞定它：

问题根源 #

HTML表格默认的table-layout属性值是auto，这种模式下浏览器会优先根据单元格内容自动计算列宽，哪怕你手动设置了width，也会被内容的宽度优先级覆盖，导致你的200px设置直接失效。

解决方案 #

只需要给表格加上table-layout: fixed属性，强制浏览器按照你指定的宽度来渲染列，再配合外层容器的overflow-x:auto，就能完美实现横向滚动的效果。

方式1：内联样式直接修改 #

修改后的完整代码如下：

<div style="overflow-x:auto;">
  <table style="table-layout: fixed; width: 100%;">
    <tr>
      <th style="width: 200px;">First Name</th>
      <th style="width: 200px;">Last Name</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
      <th style="width: 200px;">Points</th>
    </tr>
    <tr>
      <td style="width: 200px;">Jill</td>
      <td style="width: 200px;">Smith</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
      <td style="width: 200px;">50</td>
    </tr>
    <tr>
      <td style="width: 200px;">Eve</td>
      <td style="width: 200px;">Jackson</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
      <td style="width: 200px;">94</td>
    </tr>
    <tr>
      <td style="width: 200px;">Adam</td>
      <td style="width: 200px;">Johnson</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
      <td style="width: 200px;">67</td>
    </tr>
  </table>
</div>

方式2：外部CSS统一设置（更整洁） #

如果项目里有单独的CSS文件，用这种方式维护起来更方便：

.table-container {
  overflow-x: auto;
}

.table-container table {
  table-layout: fixed;
  width: 100%;
}

.table-container th,
.table-container td {
  width: 200px;
  /* 可选：处理过长内容，避免撑开单元格 */
  word-wrap: break-word;
  /* 或者用省略号截断内容 */
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

对应的HTML结构可以简化成：

<div class="table-container">
  <table>
    <!-- 表格内容不变 -->
  </table>
</div>

额外说明 #

• table-layout: fixed会让表格的列宽严格遵循你设置的数值，不再受单元格内容影响
• 给表格加上width: 100%是为了让表格在容器宽度足够时自适应，宽度不足时触发横向滚动
• 如果单元格内容过长，可以添加上面注释里的样式来优化显示效果，避免内容溢出破坏布局

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