使用百分比和minmax()函数可实现响应式表格布局。首先采用table-layout: fixed与百分比宽度适用于固定列数场景，确保单元格按比例分配空间；其次通过CSS Grid结合minmax()定义列宽范围，如minmax(100px, 1fr)，实现弹性伸缩，适合复杂布局；最后利用媒体查询在不同屏幕下调整列宽或隐藏非关键列，提升移动端体验。选择方案需权衡结构灵活性与浏览器兼容性。
在现代网页开发中，表格在展示数据时依然广泛使用，但传统表格在小屏幕上容易出现横向滚动或内容溢出的问题。为了让表格在不同设备上都能良好显示，需要实现响应式单元格宽度。CSS 提供了多种方式来控制表格单元格的宽度，其中使用百分比和 minmax() 函数是两种高效且灵活的方法。
使用百分比设置单元格宽度
通过为 <td> 或 <th> 设置百分比宽度，可以让单元格根据容器自动调整大小。这种方法适用于列数固定且希望各列按比例分配空间的场景。
关键点在于将表格设为 table-layout: fixed，这样列宽才会严格遵循设定的百分比，而不是由内容决定。
- 给
table设置width: 100%和table-layout: fixed - 为每一列的
th或td设置对应的百分比，如width: 25% - 配合
word-wrap: break-word防止长单词撑破单元格
示例代码：
立即学习“前端免费学习笔记（深入）”；
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
th:nth-child(1), td:nth-child(1) { width: 20%; }
th:nth-child(2), td:nth-child(2) { width: 30%; }
th:nth-child(3), td:nth-child(3) { width: 50%; }
使用 minmax() 与 CSS Grid 实现更灵活的响应式布局
当表格结构复杂或希望实现动态列宽时，可以将传统 <table> 替换为基于 CSS Grid 的布局，结合 minmax() 函数，让每列在最小和最大宽度之间弹性伸缩。
minmax(min, max) 允许定义列宽的范围，比如 minmax(100px, 1fr) 表示该列至少 100px，最多占据可用空间的等分之一。
- 用
display: grid替代表格布局，适用于div模拟的表格 - 使用
grid-template-columns配合minmax()定义列宽策略 - 可混合使用
minmax()、fr、auto等单位实现智能分配
示例代码：
立即学习“前端免费学习笔记（深入）”；
.table-grid {
display: grid;
grid-template-columns: minmax(80px, 1fr) minmax(120px, 2fr) minmax(150px, 3fr);
gap: 1px;
background: #ddd;
}
.grid-cell {
padding: 8px;
background: white;
overflow: hidden;
text-overflow: ellipsis;
}
这种方式特别适合移动端优先的设计，能确保小屏幕上关键列不被压缩过小，大屏幕上又能充分利用空间。
结合媒体查询优化不同屏幕体验
即使使用了百分比或 minmax()，在极窄屏幕上仍可能需要调整列宽策略。通过媒体查询，可以在特定断点下重新定义列的分布。
例如，在手机上将某些非关键列隐藏，或改变 grid-template-columns 的配置。
- 在
@media (max-width: 600px)中调整列宽比例 - 隐藏次要列：
display: none - 改为单列堆叠展示（适用于高度优先的场景）
示例：
@media (max-width: 600px) {
.table-grid {
grid-template-columns: 1fr;
}
/* 隐藏第三列 */
.table-grid > div:nth-child(3),
.table-grid > div:nth-child(6) {
display: none;
}
}
基本上就这些。使用百分比适合简单表格，而 minmax() 搭配 Grid 更适合复杂响应式需求。选择哪种方式取决于你的结构灵活性和浏览器兼容性要求。
