使用 table-layout: fixed 配合百分比宽度和响应式设计，可实现表格在不同屏幕下的自适应；通过设置固定宽、min-width、隐藏非关键列及文本截断，确保布局稳定且内容清晰。
让表格在不同屏幕尺寸下正常显示，关键在于控制列宽的自适应行为。CSS 提供了多种方式来实现这一目标，核心是合理使用 table-layout、width、min-width 和响应式设计技巧。
1. 使用 table-layout: fixed
这是实现可控列宽的关键属性。默认情况下，表格使用自动布局（auto），列宽由内容决定，容易导致错乱。设置 table-layout: fixed 后，列宽由表格宽度和首行单元格宽度决定，更利于控制。
示例：- 给 table 设置固定布局：
table { table-layout: fixed; width: 100%; } - 此时 th 或 td 的宽度将直接影响列宽
- 配合百分比或固定值设定每列宽度，如
th:nth-child(1) { width: 20%; }
2. 设置合理的列宽策略
在 fixed 布局基础上，通过 CSS 精确控制每列表现：
- 对内容较短的列设固定宽度，如操作列：
width: 80px; - 对可能换行的文本列使用
min-width配合word-wrap: break-word - 关键字段可设
white-space: nowrap防止换行，但需注意溢出 - 留出一列不设宽，让它自动填充剩余空间
3. 响应式处理与文本截断
小屏幕下避免横向滚动，可通过媒体查询调整列行为：
三顾购物系统化妆品版
下载
本版本采用三顾购物平台，适合应用于化妆品销售。一、商品管理 商品发布：支持4种自定义价格，自定义商品字段完美支持多种行业应用，商品显示属性控制，不限上传商品图片，每个商品均有5帧幻灯片支持，拥有新品、特价、推荐等属性，可自定义随意编写商品介绍。商品管理：按各种属性查看商品列表、库存及价格，管理具体商品。商品评论：管理审核删除回复网友对商品的评级及评论。另支持品牌管理、单位管理、赠品管理等。二、订单
立即学习“前端免费学习笔记（深入）”；
- 在窄屏隐藏非关键列：
@media (max-width: 768px) { .hide-on-small { display: none; } } - 长文本单元格启用省略号：
overflow: hidden; text-overflow: ellipsis; - 结合 max-width 控制图片或输入框等元素不撑破表格
4. 配合 HTML 结构优化
CSS 效果依赖良好的结构：
- 确保表格有明确的表头（thead）和主体（tbody）
- 首行 th/td 数量与后续行一致，避免宽度计算异常
- 避免跨列（colspan）破坏列宽分布，必要时用嵌套容器替代
