如何为带百分比列宽的表格添加水平滚动条？

要实现你需要的效果，需调整结构与样式，核心是通过外层容器实现滚动逻辑，同时确保列百分比宽度生效，具体修改如下：

1. 调整HTML结构 #

给表格添加外层容器承载滚动，同时修正标签错误（<th>的闭合标签应为</th>，而非</td>）：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th class="first">Title one</th>
        <th class="second">Title two</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="first">Content one</td>
        <td class="second">Content two</td>
      </tr>
    </tbody>
  </table>
</div>

2. 修改CSS样式 #

• 外层容器设置宽度范围与滚动属性，触发滚动条件
• 表格设为100%宽度，让列百分比基于容器计算
• 保留列的百分比宽度配置

.table-container {
  min-width: 500px;
  max-width: 1000px;
  overflow-x: auto;
}

table {
  width: 100%;
  border: 1px solid;
}

.first {
  width: 30%;
  border: 1px solid;
}

.second {
  width: 70%;
  border: 1px solid;
}

效果说明 #

• 容器宽度≥500px时，表格自适应容器宽度，两列保持30%/70%的比例
• 容器宽度<500px时，容器显示水平滚动条，表格维持最小500px宽度，列比例不变

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