Bootstrap表格行比表格元素小1px的原因及解决方法

问题描述 #

开发物料清单（BOM）展示页面时，使用Bootstrap Table的子表功能实现多层BOM展开，功能正常但出现列边框偏移问题：表格行<tr>比<table>元素窄1px，且每嵌套一层子表，偏移效果更明显。

原因分析 #

核心问题来自Bootstrap Table的默认样式叠加与浏览器边框渲染的像素级偏差：

• Bootstrap Table的.table类默认使用border-collapse: collapse，嵌套子表时，父表与子表的边框计算会产生累积误差
• 子表所在的detail-view单元格虽已设置padding:0，但子表<table>元素继承的默认边距、宽度规则，导致行元素与表格容器的宽度不匹配
• 每一层嵌套都会叠加上述偏差，最终导致偏移效果逐层放大

解决方法 #

方案1：强制子表宽度与边框统一 #

在自定义CSS中添加以下规则，消除宽度偏差并统一边框计算：

/* 强制子表宽度100%，清除默认边距 */
table.sub.table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

/* 确保行元素与表格宽度完全一致 */
table.sub.table tr {
  width: 100% !important;
}

/* 修正单元格边框继承问题，避免偏移 */
table.sub.table td {
  border-left: 1px solid #dee2e6 !important;
  border-right: 1px solid #dee2e6 !important;
}

方案2：优化detail-view容器样式 #

在原有基础上，给detail-view单元格添加宽度强制规则，确保容器充足：

.bootstrap-table .detail-view>td {
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

完整修改后的CSS代码 #

替换原页面中的<style>内容：

tr[data-has-detail-view="false"]>td:first-child>a {
  display: none !important;
}

table.sub>thead {
  visibility: collapse;
}

.bootstrap-table .detail-view>td {
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

table.sub.table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

table.sub.table tr {
  width: 100% !important;
}

table.sub.table td {
  border-left: 1px solid #dee2e6 !important;
  border-right: 1px solid #dee2e6 !important;
}

替代方案：单层表格+缩进展示 #

若嵌套表格的样式冲突难以彻底解决，可改用单层表格+层级缩进的方式：

1. 扁平化处理BOM数据，给每个层级的物料添加level字段标识嵌套深度
2. 在表格的Position列，根据level值添加左侧缩进样式
3. 通过展开/折叠按钮控制子层级数据的显示与隐藏

关键示例代码：

// 扁平化多层BOM数据
function flattenBom(data, level = 0) {
  let result = [];
  data.forEach(item => {
    result.push({...item, level});
    if (item.bom) {
      result = result.concat(flattenBom(item.bom, level + 1));
    }
  });
  return result;
}

// 表格列定义中添加缩进格式化
columns: [{
  title: 'Position',
  field: 'position',
  formatter: function(value, row) {
    return `<div style="padding-left: ${row.level * 20}px">${value}</div>`;
  }
},
// 其他列定义...
]

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