使用 table-layout: fixed 配合 width: 100% 和 word-wrap: break-word 可实现基础响应式表格；对于更复杂场景，推荐采用 Grid 或 flex 布局模拟表格，通过 fr 单位或 flex: 1 控制列宽，并结合媒体查询在小屏下隐藏非关键列或转为堆叠布局，提升移动端可读性。

在响应式设计中，表格的列宽自适应是一个常见挑战。尤其是在小屏幕上，固定宽度的表格容易出现横向滚动或内容挤压的问题。要让css实现响应式表格列宽自适应，关键在于合理使用布局方式和属性控制。

使用 table-layout: fixed

默认情况下，表格采用自动布局（table-layout: auto），列宽由内容决定，容易导致不均衡。设置 table-layout: fixed 可以让列宽根据容器分配，而不是内容长度。

• 配合 width: 100% 让表格占满父容器
• 列宽将更均匀，避免某列因内容过长而撑开
• 结合 word-wrap: break-word 防止长文本溢出

示例代码：

 table {   width: 100%;   table-layout: fixed;   border-collapse: collapse; } td, th {   word-wrap: break-word;   overflow: hidden;   text-overflow: ellipsis; } 

用 flex 或 grid 模拟表格布局

对于复杂响应式需求，传统 <table> 标签可能不够灵活。可以使用 display: flex 或 display: grid 构建类表格结构，获得更强的控制力。

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

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

• Grid 布局可通过 fr 单位按比例分配列宽
• Flex 布局可用 flex: 1 实现等宽或加权分布
• 在移动端可切换为堆叠布局，提升可读性

Grid 示例：

 .table {   display: grid;   grid-template-columns: 1fr 2fr 1fr;   gap: 1px;   background: #ddd; } .row {   display: contents; } .cell {   padding: 8px;   background: white; } 

针对不同设备动态调整列显示

在极窄屏幕上，并非所有列都需显示。可通过媒体查询控制非关键列的隐藏，或使用“优先级显示”策略。

• 给次要列添加类如 .hide-on-mobile
• 使用 @media 查询在小屏下隐藏部分列
• 或通过伪元素在每行展示标签+值，模拟卡片布局

CSS 示例：

 @media (max-width: 600px) {   .hide-on-mobile {     display: none;   } } 

基本上就这些方法。选择哪种取决于你的结构灵活性和浏览器兼容要求。table-layout 固定搭配文本截断是最简单有效的方案，而 Grid/Flex 更适合完全自定义的响应式场景。

以上就是