HTML表格th单元格百分比宽度不生效，像素宽度正常（Bootstrap项目）

我太懂这种烦恼了——用Bootstrap做表格时，表头单元格（th）的默认宽度总是比实际文本宽，自动截断不说，还打乱了你要对齐的红线和蓝线的起始位置。之前硬改像素宽度没生效？大概率是Bootstrap的默认样式优先级更高，试试下面这几个方案：

方案1：让表头宽度适配内容（推荐） #

给表头单元格加一个自定义类，比如.fit-header，然后用CSS强制它的宽度贴合内容：

.fit-header {
    width: fit-content !important; /* 宽度适配内容 */
    white-space: nowrap; /* 保持文本一行，避免换行 */
    overflow: visible; /* 取消Bootstrap默认的文本截断 */
}

然后在你的th标签里应用这个类：

<th class="fit-header">你的表头文本</th>

方案2：取消表格固定布局，让列宽自动调整 #

Bootstrap的.table类默认可能用了table-layout: fixed（固定布局），这会让列宽均分而非适配内容。给表格加个自定义类来覆盖这个设置：

.table-auto {
    table-layout: auto !important; /* 切换为自动布局，列宽随内容调整 */
}
.table-auto th {
    white-space: nowrap;
    overflow: visible;
}

表格标签改成这样：

<table class="table table-auto">
    <!-- 表格内容 -->
</table>

注意事项 #

• 如果你的表头文本特别长，适配内容后可能会让表格过宽，这时候可以搭配Bootstrap的text-truncate类，但要给th设置一个合理的最小宽度，避免完全挤压其他列；
• 如果你不想用!important，可以用更具体的CSS选择器（比如你的表格所在容器的类+th）来提升样式优先级，比如：.my-table-container th.fit-header { ... }

内容的提问来源于stack exchange，提问作者Yash Morar