Bootstrap Table首列复选框缩小列宽时无法居中如何解决

问题根因 #

Bootstrap Table 自带的复选框列默认给<input>设置了固定左偏移的绝对定位规则，且列容器没有做相对定位约束，因此列宽缩小后复选框不会跟随列的边界调整位置。

修复方案 #

方式1：覆盖默认CSS样式（推荐） #

替换你现有的<style>块内容即可：

<style>
.data-checkbox {
  max-width: 70px;
  width: 70px; /* 可选，固定列宽避免自动拉伸 */
  position: relative; /* 作为子元素定位的参照容器 */
  text-align: center;
  padding: 0 !important;
}

/* 覆盖Bootstrap Table默认的复选框定位规则 */
.data-checkbox input[type="checkbox"],
.bs-checkbox input[type="checkbox"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
</style>

方式2：补充表格配置 #

在复选框列的<th>标签上补充data-align="center"属性，让Bootstrap Table自动给列添加居中对齐规则，配合CSS使用效果更稳定：

<th data-field="state" class="data-checkbox" data-checkbox="true" data-align="center"></th>

额外注意 #

你的<table>标签上添加了contenteditable="true"属性，如果不需要单元格可编辑功能建议删除，避免和Bootstrap Table的列宽调整、选中逻辑产生冲突。

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