css响应式表格在小屏幕如何滚动显示-css教程-PHP中文网

css响应式表格在小屏幕如何滚动显示

P粉602998670

发布： 2025-10-19 16:48:02

原创

257人浏览过

使用外层容器包裹表格并设置水平滚动，可解决小屏幕下表格过宽问题。通过.table-container设置overflow-x: auto实现滚动，避免直接对table操作，配合white-space: nowrap防止换行，提升移动端体验；为增强提示，可加阴影或边框表明内容截断，iOS使用-webkit-overflow-scrolling: touch优化滑动。若列过多，可采堆叠布局、隐藏次要列或转为描述列表等方案，确保内容可访问且操作自然，简单有效，细节关键。

css响应式表格在小屏幕如何滚动显示

在小屏幕设备上，当表格内容过宽时，直接显示会导致布局错乱或内容被截断。为了让响应式表格在小屏幕上正常查看，可以通过 CSS 设置水平滚动来解决这个问题。

给表格容器添加滚动功能

不要直接对 table 元素设置滚动，而是用一个外层容器包裹表格，然后对容器设置固定宽度和溢出滚动。

示例代码：

<div class="table-container">
  <table>
    <thead>
      <tr><th>姓名</th><th>年龄</th><th>城市</th><th>职业</th><th>薪资</th></tr>
    </thead>
    <tbody>
      <tr><td>张三</td><td>28</td><td>北京</td><td>工程师</td><td>15000</td></tr>
      <tr><td>李四</td><td>32</td><td>上海</td><td>设计师</td><td>12000</td></tr>
    </tbody>
  </table>
</div>

登录后复制

CSS 样式如下：

立即学习“前端免费学习笔记（深入）”；

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 提升移动端滑动体验 */
}
<p>table {
width: 100%;
border-collapse: collapse;
white-space: nowrap; /<em> 防止文本换行，保持横向展开 </em>/
}</p><p>th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}</p>

登录后复制