如何为HTML表格添加水平滚动条，仅在移动端显示而非宽屏设备

你当前的代码会让表格在所有屏幕尺寸下都显示水平滚动条，要实现仅移动端显示的效果，需要通过CSS媒体查询来限制滚动样式的生效范围，具体调整如下：

最终代码实现 #

HTML（保持你的结构不变）

<div class="table_wrapper">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

CSS（添加媒体查询控制）

/* 宽屏设备下：表格自适应容器宽度，无滚动条 */
.table_wrapper {
  width: 100%;
}

/* 移动端设备（屏幕宽度≤768px）：启用水平滚动 */
@media (max-width: 768px) {
  .table_wrapper {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    /* 可选：优化滚动条视觉效果 */
    scrollbar-width: thin;
  }
}

关键说明 #

1. 媒体查询max-width: 768px是常用的移动端断点，你可以根据需求调整数值（比如改成640px适配小屏手机）。
2. 宽屏模式下，表格自动适配容器宽度，不会触发滚动；只有屏幕宽度小于设定值时，容器才开启水平滚动，让表格内容可横向滑动查看。
3. 可选的scrollbar-width: thin能让移动端滚动条更简洁，提升视觉体验。

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