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