如何修复Bootstrap Table表格宽度过大、Link列占用空间过多的问题

问题原因 #

你使用的Bootstrap .table 类默认宽度为100%，会自动填满父容器的可用宽度。当其余列的内容总宽度小于父容器宽度时，剩余的空白空间会被自动分配给没有设置宽度限制的列，也就是你这里的Link列，所以它会占用远大于内容实际需要的空间。

修复方案 #

你可以任选以下其中一种方式解决：

• 方案1：给Link列的表头设置强制收缩样式，让它仅占用内容所需的最小宽度，修改表头的Link列代码即可：

<th class="text-center" style="width: 1px; white-space: nowrap;">Link</th>

width:1px会让浏览器尽可能压缩该列宽度，white-space: nowrap保证列内内容不会换行，最终列宽会自动适配内容的实际长度。如果你的Link列内容很长不需要强制不换行，去掉white-space: nowrap属性即可。

• 方案2：如果不需要表格占满整行宽度，直接给表格添加Bootstrap自带的w-auto类，让表格整体宽度自适应内容总宽度：

<table border="1" class="table table-bordered table-hover w-auto">

• 方案3：如果需要固定Link列的宽度，直接给表头设置指定宽度即可，比如设置为150px：

<th class="text-center" style="width: 150px;">Link</th>

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