小屏幕下需用data-priority属性配合媒体查询实现列级响应式隐藏，而非仅依赖table-responsive；在max-width:768px下对data-priority≥3的th/td设display:none，并确保thead与tbody中同列priority值完全一致。
小屏幕下直接用 table-responsive 不行
它只是给表格包一层横向滚动容器，display: block; overflow-x: auto，列一个没少，用户还得左右拖拽才能看到姓名、状态这些关键字段。这不是“只显示核心列”，只是“勉强能看全”。真要折叠列，得靠 data-priority + 媒体查询控制显隐。
data-priority 必须成对加在 <th> 和 <code><td> 上
<p>同一列的表头和所有单元格必须有完全一致的 <code>data-priority 值，否则 display: none 会错位——比如只隐藏了 <th>，<code><td> 还在，表头和数据就对不上。常见错误是只给 <code><th> 加属性，忘了遍历 <code><tbody> 里的每个 <code><td>。
<ul>
<li>
<code>data-priority="1"：必显列（如 ID、姓名）
data-priority="2"：次重要列（如状态、创建时间）data-priority="3" 或更高：小屏下可隐藏（如操作按钮、备注、IP 地址）CSS 规则必须用 display: none，不能用 visibility: hidden
visibility: hidden 只让内容不可见，但还占布局空间，会导致表格列宽计算异常、文字换行错乱、甚至整行高度崩塌。下面这段 CSS 是安全且有效的：
@media (max-width: 768px) {
[data-priority="3"],
[data-priority="4"],
[data-priority="5"] {
display: none;
}
}
注意：Bootstrap 5 的 md 断点是 768px，别写成 767px 或 576px（那是 sm），否则在 iPad 竖屏等常见设备上不触发。
含 colspan 或 rowspan 的单元格要单独处理
这类跨行列一旦被 display: none，会破坏表格结构，可能撑开相邻列或导致错行。最稳妥的做法是：避免在需响应式折叠的列里用 colspan/rowspan；如果实在绕不开，就得用 JS 动态移除或重写该单元格，而不是依赖纯 CSS 隐藏。
真正容易被忽略的是：优先级编号必须从 1 开始连续，且同列所有单元格值严格一致——差一个空格、多一个引号、大小写不统一，都会让选择器失效。调试时直接用浏览器 DevTools 检查对应 <th> 和第一个 <code><td> 的属性值是否完全相同，比猜更省时间。</td>
