小屏幕下需通过自定义CSS+data-priority属性实现列级响应式隐藏，而非仅用table-responsive；在max-width:768px下对data-priority≥3的th/td设display:none，并确保thead与tbody中同列priority值一致。
小屏幕下隐藏非关键列，用 table-responsive 不够用
直接套 table-responsive 只是让表格横向滚动，并不能“隐藏列”，用户仍要左右滑动才能看到关键信息。真正要的是在小屏（如 sm 或 md）下自动折叠非关键列，只留 姓名、状态 这类核心字段。
Bootstrap 本身不提供列级响应式开关，得靠自定义 CSS + data-* 属性配合实现。
- 给每列
<th>和对应<td>加统一标识，比如data-priority="2"，数值越小优先级越高 - 用媒体查询在
max-width: 768px下，对data-priority大于某阈值的列设display: none - 确保
<thead>和<tbody>中同位置列的data-priority值一致，否则错位
怎么写响应式隐藏规则（CSS + data-priority）
Bootstrap 5 的断点是 sm: 576px、md: 768px，一般选 md 作为折叠起点。下面这段 CSS 会让 data-priority="3" 及以上的列在小屏下不可见：
@media (max-width: 768px) {
[data-priority="3"],
[data-priority="4"],
[data-priority="5"] {
display: none;
}
}注意：不要用 visibility: hidden —— 它占布局空间，会导致表格列宽错乱；必须用 display: none。
-
data-priority值建议从 1 开始编号，1 是必显列（如 ID 或姓名），2 是次重要（如状态、时间），3+ 是可折叠列（如操作按钮、备注） - 如果用了
colspan或rowspan，这些单元格需单独处理，display: none可能破坏结构，优先避免跨列 - Bootstrap 的
table-striped或table-hover不受影响，样式会自动重排
JavaScript 动态控制列显隐（适合列数多或逻辑复杂场景）
纯 CSS 方案在列顺序变动、动态增删行时容易失效。若表格由 JS 渲染（如 Vue/React 或 fetch 后插入），更稳妥的做法是用脚本控制 classList：
function toggleTableColumns() {
const isSmall = window.innerWidth <= 768;
document.querySelectorAll('th, td').forEach(el => {
const priority = el.dataset.priority;
if (priority && parseInt(priority) > 2) {
el.classList.toggle('d-none', isSmall);
}
});
}
window.addEventListener('resize', toggleTableColumns);
toggleTableColumns();这里用 d-none（Bootstrap 内置工具类）比写 CSS 更易维护，且兼容 SSR 场景。
- 别在
DOMContentLoaded里只执行一次 —— 必须监听resize，否则横竖屏切换时失效 - 移动端 Safari 对
resize触发不敏感，可加节流（setTimeout防抖） - 如果表格有分页或虚拟滚动，每次数据刷新后都要调用
toggleTableColumns()
移动端点击展开被隐藏列的细节（可选但实用）
用户可能想临时查看某条记录的完整信息。可以在每行末尾加一个 details 按钮，点击后显示该行所有被隐藏字段：
<tr>
<td>张三</td>
<td>已启用</td>
<td data-priority="3">2024-03-15</td>
<td data-priority="4">编辑</td>
<td class="d-md-none">
<button type="button" class="btn btn-sm btn-outline-primary"
onclick="showRowDetails(this)">⋯</button>
</td>
</tr>这个按钮只在 md 以下显示（d-md-none），点开后用 position: absolute 浮层展示隐藏列内容，不破坏表格结构。
- 浮层内容建议用
dl+dt/dd排版，语义清晰且易读 - 避免用
tooltip—— 它不支持多行、难控制宽度，且焦点管理麻烦 - 如果表格行数很多，浮层应绑定到
body并用transform: translateY定位，防止被父容器裁剪
实际做下来，最常被忽略的是 data-priority 在 thead 和 tbody 中没对齐，或者忘了给 th 也加属性 —— 结果表头还在，数据列没了，整行偏移。动手前先检查一遍列索引是否严格一致。
