CSS：列宽手动设置时表格整体宽度配置及粘性表头滚动问题

你提到的用display: block改造thead和tbody来实现粘性表头+滚动的方案，我之前踩过不少坑——手动设宽度太容易出错，要么列宽不对齐，要么右侧留白，整体宽度也很难适配不同屏幕。给你分享两个更省心的方案，不用手动算宽度，完美解决这些问题：

方案一：用CSS Grid实现自动列宽对齐 #

这个方案彻底抛弃手动列宽设置，用Grid的弹性布局让列自动适配，同时保持thead粘性和tbody滚动：

/* 外层容器负责小屏幕下的横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
}

/* 把表格改成Grid布局 */
.sticky-table {
  display: grid;
  /* 自适应列宽，最小120px，多余空间自动分配 */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 100%;
}

/* 让thead和tbody都占满所有列 */
.sticky-table thead,
.sticky-table tbody {
  grid-column: 1 / -1;
}

/* 表头粘性定位 */
.sticky-table thead tr {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

/* 每行都继承表格的列宽配置，保证th和td对齐 */
.sticky-table tr {
  display: grid;
  grid-template-columns: inherit;
  border-bottom: 1px solid #e5e7eb;
}

.sticky-table th,
.sticky-table td {
  padding: 12px 16px;
  text-align: left;
  border-right: 1px solid #e5e7eb;
}

.sticky-table th:last-child,
.sticky-table td:last-child {
  border-right: none;
}

/* 控制tbody高度，超出纵向滚动 */
.sticky-table tbody {
  max-height: 400px;
  overflow-y: auto;
}

HTML用标准的table结构就行，不用改任何标签层级，Grid会自动帮你对齐列宽，完全不用手动设置每个th/td的宽度。

方案二：原生表格布局+Sticky定位 #

如果你更倾向于保留table的原生行为，这个方案用table-layout: fixed让列宽自动分配，同时实现粘性表头和滚动：

.table-container {
  width: 100%;
  overflow-x: auto;
}

.sticky-table {
  width: 100%;
  border-collapse: collapse;
  /* 固定布局，自动根据table宽度分配列宽，避免留白 */
  table-layout: fixed;
}

/* 表头粘性 */
.sticky-table thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
  padding: 12px 16px;
}

/* tbody设为block实现纵向滚动 */
.sticky-table tbody {
  display: block;
  max-height: 400px;
  overflow-y: auto;
}

/* 让thead和tbody的行保持相同的宽度，避免列错位 */
.sticky-table thead,
.sticky-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.sticky-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

这个方案的优势是兼容性更好，而且完全保留了table的语义化，列宽会根据table的宽度自动分配，不会出现右侧留白的问题。

方案对比 #

• Grid方案更灵活，适合需要自定义列宽弹性比例的场景，比如某列固定宽度，其他列平分剩余空间
• 原生表格方案更贴近传统table的用法，学习成本低，兼容性覆盖更老的浏览器

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