Bootstrap表格列宽需设table-layout:fixed并给th设width百分比，td设宽无效；需配合white-space:normal和word-break处理换行；响应式下建议媒体查询调整或改用CSS Grid。

Table列宽不随内容变化？默认是content-based，不是百分比分配

bootstrap 的 table 默认使用浏览器原生表格布局（table-layout: auto），列宽由内容最长单元格决定，width: 20% 这类 css 在 td 或 th 上基本无效。想“按百分比分配列宽”，必须显式启用固定布局。

• 给 <table> 添加 <code>table-layout: fixed —— 这是前提，否则所有宽度设置都可能被忽略
• 给每列的 <th> 或 <code><thead><tr> 中的 <code><th> 设置 <code>width，例如 style="width: 30%"
• 避免在 td 上设宽，优先控制 th；否则 td 内容溢出时可能撑开整列
• 如果用了 .table-responsive，注意它会包裹 div，此时 table-layout: fixed 仍需作用于内部 <table> 元素本身 <h3>Bootstrap 5 中用 utility class 快速设列宽？不行，得手写 style 或自定义 class</h3> <p>Bootstrap 5 的 width utilities（如 <code>mw-100、w-25）只对块级元素生效，th 和 td 是表格单元格，w-25 对它们无效。不能靠现成 class 实现列宽百分比。
  • 最简方案：直接在 <th> 上加内联样式，如 <code><th style="width: 40%"> <li>更干净的做法：定义自定义 class，比如 <code>.w-col-30 { width: 30% !important; }，再加到 <th> 上 <li>别给 <code><td> 加 <code>text-truncate 就以为能控宽——它只截断文本，不约束列宽本身
  • 若列数动态（比如 Vue/React 渲染），记得把 width 值也动态绑定，否则首行 th 宽度不匹配会导致错位

  内容超长导致换行或溢出？fixed layout 下需要额外处理

  启用 table-layout: fixed 后，列宽被锁定，但长文本默认不换行，容易横向溢出或撑破容器。这不是 Bootstrap 的 bug，而是 CSS 表格行为本身。

  
  VPS Bootstrap
  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
  下载
  • 给 td 和 th 加 white-space: normal（覆盖默认的 nowrap）
  • 配合 word-break: break-word 或 overflow-wrap: break-word 处理长英文/数字串
  • 慎用 text-nowrap —— 它会禁用换行，和固定列宽冲突，导致横向滚动或内容被裁
  • 如果某列必须单行显示（如 ID 列），可单独设 white-space: nowrap，其余列保持正常换行

  响应式下百分比列宽失效？viewport 变小后实际像素不足

  当屏幕变窄，比如手机端，30% + 40% + 30% 的列宽总和虽为 100%，但每列最小宽度可能被内容撑起（尤其含按钮、图片），导致整体换行或横向滚动。

  • 在小屏上，考虑用 @media (max-width: 576px) 覆盖列宽，比如改为 width: 100% 让列堆叠（配合 tbody 拆成卡片式结构）
  • 或者改用 Bootstrap 的 .d-none .d-sm-table-cell 隐藏次要列，保留关键字段
  • 不要依赖纯百分比应对所有设备——固定像素宽（如 width: 120px）+ min-width 组合往往更可控
  • 真要动态适配，建议用 CSS Grid 替代 table，尤其数据非强语义化场景；table 的列宽控制本质就是反响应式的

  真正麻烦的不是怎么设百分比，而是 fixed layout + 内容换行 + 响应式三者之间的拉扯。调的时候先关掉 responsive wrapper，确认基础列宽正确，再一层层加限制条件。