表格tbody设overflow:scroll后td变窄，求全宽滚动解决方案

这个问题我碰到过好多次了——当你给tbody设置display: block来实现滚动时，它会脱离表格的原生布局模型，导致thead和tbody的列宽不再同步，td自然就被压缩得很窄。下面给你两种实用的解决方案，你可以根据自己的需求选择：

方法一：使用CSS Grid实现对齐（推荐现代场景） #

这种方法通过CSS Grid让表头和tbody共享列模板，既能保留滚动功能，又能保证列宽完全对齐，还能轻松实现表头固定：

/* 把表格转为Grid布局 */
table {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 替换成你的实际列数，比如3列就写3 */
  width: 100%;
  border-collapse: collapse;
}

/* 让thead和tbody的子元素直接参与Grid布局 */
thead, tbody {
  display: contents;
}

/* 表头行使用Grid布局，继承表格的列模板 */
thead tr {
  display: grid;
  grid-template-columns: inherit;
  background-color: #f5f5f5;
  position: sticky;
  top: 0; /* 可选：让表头固定在顶部，滚动tbody时表头不动 */
}

/* tbody设置滚动，同时占满所有列 */
tbody {
  max-height: 100px;
  overflow-y: auto;
  display: block;
  grid-column: 1 / -1; /* 确保tbody占满表格的所有列 */
}

/* 表格行使用Grid布局，继承列模板 */
tbody tr {
  display: grid;
  grid-template-columns: inherit;
}

/* 统一单元格样式 */
th, td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

方法二：使用固定表格布局（兼容旧浏览器） #

如果需要兼容较老的浏览器，这种传统方法更稳妥：通过table-layout: fixed让列宽由表头决定，同时保持thead的表格布局来对齐tbody：

table {
  width: 100%;
  table-layout: fixed; /* 固定表格布局，列宽由表头或手动设置的宽度决定 */
  border-collapse: collapse;
}

/* 让thead保持表格布局，确保列宽和tbody同步 */
thead {
  display: table;
  width: 100%;
}

/* tbody设置滚动 */
tbody {
  display: block;
  max-height: 100px;
  overflow-y: auto;
  width: 100%;
}

/* 手动设置列宽（可选，根据你的列数调整比例） */
th, td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
  width: 33.33%; /* 3列的话每列占1/3，2列就50%，以此类推 */
}

两种方法都能解决td过窄的问题，核心思路都是让thead和tbody的列宽规则保持一致，避免display: block破坏表格的原生对齐逻辑。

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