必须设 table-layout: fixed 才能控列宽，配合 width: 100% 和显式列宽（如 ），再结合 data-label 卡片模式或容器水平滚动，兼顾响应式与可访问性。
直接给 浏览器默认用 但注意： 横向滚动对用户不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑来滑去根本记不住哪列是啥。更稳妥的做法是让每行 媒体查询里隐藏 后台数据列表、财务明细这类列多且不能删字段的场景，水平滚动不是妥协，是合理选择。关键在滚动要顺滑、有提示、不卡顿。 响应式表格不是只让眼睛看着舒服。用 <table> 加 <code>width: 100% 不管用，小屏下照样溢出、文字挤成一团——问题不在样式写得少，而在没动表格的底层布局逻辑。
必须设
table-layout: fixed 才能控列宽table-layout: auto，会等所有内容（比如长 URL、未换行的 Base64）加载完才算列宽，窄屏下一列被撑开，整行就歪掉。改成 table-layout: fixed 后，列宽只看第一行 <th> 或显式 <code>width，不依赖内容，渲染快且可控。
table-layout: fixed 必须配合 width: 100% 才生效；<th> 或 <code><col> 上得有明确宽度，例如：
<th style="width: 25%">订单号</th>
<th style="width: 20%">时间</th>
<th style="width: 30%">商品</th>
<th style="width: 25%">状态</th>
word-wrap: break-word 或 text-overflow: ellipsis 处理超长文本，否则内容会溢出或撑破小屏列数 ≥ 4 时，优先转卡片堆叠
<tr> 变成独立区块，每个 <code><td> 带上 <code>data-label 记录原表头。
<thead>，把 <code><tr> 设为 <code>display: block；<td> 设 <code>display: block + position: relative，再用 ::before { content: attr(data-label) } 插入标签。
float 或 inline-block，窄屏下换行错位风险高data-label 值要语义清晰，比如 data-label="收货人电话"，不能简写为 "tel"
white-space: normal，否则 nowrap 会阻止换行，导致卡片高度失控报表类表格：靠容器滚动最务实
overflow-x: auto 和 -webkit-overflow-scrolling: touch（iOS 惯性滚动）<table> 设 <code>min-width: fit-content 或具体值（如 min-width: 1200px），防内容被压缩变形
white-space: nowrap 在 <td> 上，否则无空格长文本（如 Base64、URL）会直接撑爆容器
<li>父容器要有明确宽度，比如 <code>max-width: 100vw；光靠 width: 100% 在 flex 容器里可能失效最容易被忽略的点：语义与可访问性
<thead>/<code><tbody> 分组是基础，但小屏卡片模式下，<code>data-label 必须真实映射到屏幕阅读器可读的 aria-label 或 aria-labelledby，否则视障用户会丢失上下文。另外，overflow-x: auto 容器必须有 tabindex="0"，否则键盘用户无法聚焦滚动——这点连很多框架都漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
