响应式表格布局的核心是适配不同屏幕，确保可读性。通过设置 width: 100% 和 table-layout: fixed 实现流动宽度；小屏幕下利用媒体查询将行转为堆叠卡片，配合 data-label 显示列名；或采用外层容器横向滚动，适合列多场景。选择方案需权衡内容与体验。
响应式表格布局的核心是让表格在不同屏幕尺寸下都能清晰可读，尤其在小屏幕上避免出现横向滚动或内容重叠。关键是根据设备特性灵活调整表格的展示方式。
使用流动的表格宽度
确保表格能适应容器宽度，而不是固定宽度。
设置 width: 100% 并配合 table-layout: fixed 可以让单元格均匀分布或按比例伸缩。- table { width: 100%; table-layout: fixed; }
- th, td { word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; }
小屏幕下转为堆叠布局
当屏幕变窄时，把每行数据转换成垂直堆叠的卡片形式更易阅读。
触网万能商城建站系统免费版
下载
触网万能商城系统，3年专注打磨一款产品，专为网络服务公司、建站公司、威客、站长、设计师、网络运营及营销人员打造，是一款超级万能建站利器，彻底告别代码编程和找模板，改模板，改代码的低效高成本方式，仅需一个人可服务无数客户，系统集万能官网+万能商城+万能表单+博客+新闻+分销...于一体，通过海量模块拖拽布局、万能组合和超级自定义功能，可以构建各种类型的响应式网站。
- @media (max-width: 768px) {
- table, thead, tbody, th, td, tr { display: block; }
- thead tr { position: absolute; top: -9999px; left: -9999px; }
- tr { margin-bottom: 1rem; border: 1px solid #ddd; padding: 0.5rem; }
- td { position: relative; padding-left: 50%; border: none; }
- td:before { content: attr(data-label); font-weight: bold; position: absolute; left: 10px; width: 45%; }
水平滚动容器（简洁方案）
如果不想重构结构，可用外层容器包裹表格并允许横向滚动。
立即学习“前端免费学习笔记（深入）”；
这种方法实现简单，适合列数较多但内容不可简化的情况。- 将 table 包在 div 中
- div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
- 内部表格保持原样，超出部分可滑动查看
