小屏幕下需通过自定义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> 和对应 <code><td> 加统一标识，比如 <code>data-priority="2"，数值越小优先级越高
• 用媒体查询在 max-width: 768px 下，对 data-priority 大于某阈值的列设 display: none
• 确保 <thead> 和 <code><tbody> 中同位置列的 <code>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：

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载

  function toggleTableColumns() {
    const isSmall = window.innerWidth  {
      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 也加属性 —— 结果表头还在，数据列没了，整行偏移。动手前先检查一遍列索引是否严格一致。