移动端/平板端实现col及表格超出页面宽度并显示滚动条

直接给包裹表格的<col>容器加横向滚动的CSS，就能让表格在移动端/平板端超出页面宽度，同时出现滚动条，避免文本换行挤压：

步骤1：给容器加类并写CSS #

给你的<col>标签加个类名（比如table-scroll-wrap），然后添加以下样式：

.table-scroll-wrap {
  overflow-x: auto;
  /* 可选：优化移动端滚动手感 */
  -webkit-overflow-scrolling: touch;
}

.table-scroll-wrap table {
  min-width: 100%;
  white-space: nowrap; /* 强制单元格文本不换行 */
}

步骤2：对应HTML结构 #

<col class="table-scroll-wrap">
  <table>
    <!-- 你的表格内容 -->
  </table>
</col>

关键属性说明 #

• overflow-x: auto：只有当表格宽度超过容器时才显示横向滚动条，不影响正常宽度的情况。
• white-space: nowrap：彻底阻止表格单元格内的文本换行，保证排版整齐。
• -webkit-overflow-scrolling: touch：让iOS设备上的滚动更顺滑，提升体验。

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