Bootstrap 5需手动实现表格响应式卡片布局：保留表格语义，为每个添加data-label属性，配合媒体查询将tr/td设为block，并用::before伪元素注入标签，隐藏thead以确保卡片结构正确。
Bootstrap 5 表格响应式卡片布局怎么写
bootstrap 5 原生不提供「表格自动转卡片」的类，.table-responsive 只是加横向滚动条，不是你想要的卡片效果。必须手动用 display 切换 + flex 重排，配合媒体查询实现真正的移动端卡片化。
为什么不能只靠 .table-responsive
.table-responsive 的本质是给 <div> 包一层 <code>overflow-x: auto，在小屏上出现横向滚动条——它没改变 DOM 结构，也没把行（<tr>）拆成独立卡片，所以无法实现「每行变一张卡、字段垂直堆叠」的效果。
<ul><li>它不处理 <code><td> 和 <code><th> 的语义映射（比如哪个 <code><td> 对应哪个标题）
<li>卡片样式需要每个数据项带标签（如「姓名：张三」），而原表格只有纯值</li>
<li>直接 display: none / block 切换会导致可访问性问题（屏幕阅读器仍按表格结构解析）</li>
<h3>用 <code>data-label + CSS 实现真卡片布局
核心思路：保留表格语义（利于 SEO 和无障碍），用 data-label 属性把表头信息“存”到对应单元格，再通过 CSS 在移动端生成标签文本。
| 姓名 | 职位 | 部门 |
|---|---|---|
| 李四 | 前端工程师 | 技术部 |
然后加这段 CSS：
@media (max-width: 768px) {
.table tbody,
.table tr,
.table td {
display: block;
}
.table td {
position: relative;
}
.table td::before {
content: attr(data-label) ": ";
font-weight: bold;
}
.table thead {
display: none;
}
}
-
display: block让<tr> 和 <code><td> 垂直排列，形成卡片雏形 <li> <code>::before用attr(data-label)把表头文字注入每个单元格前，解决无标签问题 - 务必隐藏
<thead>，否则它会作为独立块出现在顶部，破坏卡片结构 <li>如果要加卡片边框/阴影，直接给 <code>.table tbody tr加border和padding即可 - 如果表格有合并单元格（
rowspan/colspan），data-label必须按实际逻辑重复填写，否则卡片里会漏字段 - 屏幕阅读器仍会读表格结构（这是好事），但部分老版本 NVDA 可能跳过
::before伪元素内容；如需强保障，可额外加aria-label或用<dl></dl>替代（不过那就脱离表格语义了） - 不要用
visibility: collapse隐藏表头——它在 flex/block 模式下行为不稳定，坚持用display: none
兼容性与可访问性注意点
这种方案在所有现代浏览器都可靠，但要注意两个容易被忽略的细节：
真正卡住人的从来不是代码量，而是忘了给每个 <td> 手动补 <code>data-label，尤其动态渲染时容易漏掉这一环。
