如何使Bootstrap表格的列宽分布更均匀？

Bootstrap表格默认会根据内容自动分配列宽，像你表格里“Standard Deviation”这种长文本的列会被拉得更宽，导致整体布局不均匀。给你几个实用的解决办法：

方法1：自定义CSS强制等宽列 #

修改你的CSS样式，给表格开启固定布局，再让每列均分宽度：

.table {
  width: 80vw;
  margin: 20px auto;
  table-layout: fixed; /* 关键：固定表格布局，列宽由表头定义 */
}

.table th, .table td {
  width: 20%; /* 5列每列占20%宽度 */
  text-align: center; /* 内容居中，替代你原来无效的content-align属性 */
  overflow: hidden; /* 可选：防止内容溢出表格 */
  text-overflow: ellipsis; /* 可选：内容过长时显示省略号 */
}

方法2：直接给表头加内联样式 #

如果不想修改全局CSS，直接在每个表头标签里指定宽度：

<th scope="col" style="width:20%">Mean</th>
<th scope="col" style="width:20%">Mode</th>
<th scope="col" style="width:20%">Standard Deviation</th>
<th scope="col" style="width:20%">Variance</th>
<th scope="col" style="width:20%">Range</th>

方法3：封装Bootstrap辅助类（可选） #

可以把固定布局的样式封装成自定义类，方便复用：

.table-fixed {
  table-layout: fixed;
}

然后给表格添加table-fixed类，再按方法1的方式设置列宽即可。

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