表格过滤后滚动条消失时tbody宽度异常的解决求助

问题表现 #

• 带滚动条时：表格整体宽度正常，tbody右侧显示滚动条，列与thead对齐
• 过滤后无滚动条时：tbody宽度超出表格容器，列与thead错位

问题根源 #

给tbody设置了固定宽度1205px，滚动条存在时，这个宽度包含了滚动条的占位空间；但过滤后滚动条消失，tbody依然保持1205px，而thead继承容器的100%宽度，两者宽度不匹配，导致tbody超出。另外，将thead、tbody、tr都设置为display: table的方式，会让thead和tbody的宽度计算逻辑出现偏差。

修复方案 #

1. 移除tbody固定宽度，改用相对宽度 #

把tbody的固定宽度替换为100%，让它和thead保持一致的宽度基准：

tbody {
 display: block;
 height: 326px;
 overflow: auto;
 width: 100%; /* 替换原有的width: 1205px */
}

2. 修正thead与tbody的列对齐问题 #

当tbody出现滚动条时，滚动条会占用部分宽度，导致thead和tbody列错位。可以通过容器包裹+动态调整thead宽度的方式解决，以下是优化后的完整CSS：

/* 新增容器包裹表格，实现thead固定、tbody滚动 */
.table-container {
  width: 100%;
  overflow: hidden;
}

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

tbody {
  display: block;
  height: 326px;
  overflow-y: auto;
  overflow-x: hidden; /* 隐藏水平滚动条，避免列宽溢出 */
  width: 100%;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 自定义滚动条宽度 */
tbody::-webkit-scrollbar {
  width: 8px;
}

/* 有滚动条时，thead宽度减去滚动条宽度，保证列对齐 */
thead {
  width: calc(100% - 8px);
}

3. 过滤后的动态适配 #

当过滤后数据减少、滚动条消失时，需要把thead宽度改回100%，可以通过JS实现：

const tbody = document.querySelector('.table tbody');
const thead = document.querySelector('.table thead');

function adjustTheadWidth() {
  // 判断tbody是否需要滚动条
  if (tbody.scrollHeight <= tbody.clientHeight) {
    thead.style.width = '100%';
  } else {
    thead.style.width = 'calc(100% - 8px)';
  }
}

// 页面初始化时执行
adjustTheadWidth();
// 每次执行过滤操作后，调用这个方法
// 例如：filterTableFunction(); adjustTheadWidth();

效果说明 #

• 滚动条存在时，thead宽度自动减去滚动条宽度，与tbody列完美对齐
• 过滤后无滚动条时，thead自动恢复100%宽度，tbody保持100%宽度，不会超出容器

内容的提问来源于stack exchange，提问作者h.z.