如何用CSS制作表头固定且表格、单元格宽度为百分比的表格？

你提供的固定表头方案用了固定像素宽度，要改成百分比其实很简单，核心是保证表头（thead）和内容区（tbody）的宽度同步，同时让每个表头单元格（th）和内容单元格（td）的百分比宽度一一对应。我帮你调整后的方案如下：

核心思路 #

• 让表格整体使用百分比宽度（比如width: 100%），同时给thead和tbody都设置相同的百分比宽度，确保两者尺寸一致
• 给tbody设置固定高度和overflow: auto，实现内容滚动
• 为每个th和对应的td设置相同的百分比宽度，保证滚动时列对齐
• 处理边框样式，避免display:block导致的布局错位

完整代码示例 #

HTML结构

<table class="fixed-header-table">
  <thead>
    <tr>
      <th style="width: 30%">Header 1</th>
      <th style="width: 40%">Header 2</th>
      <th style="width: 30%">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1-1</td>
      <td>Content 1-2</td>
      <td>Content 1-3</td>
    </tr>
    <tr>
      <td>Content 2-1</td>
      <td>Content 2-2</td>
      <td>Content 2-3</td>
    </tr>
    <!-- 多添加一些行，方便测试滚动效果 -->
    <tr><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr>
    <tr><td>Row 4</td><td>Row 4</td><td>Row 4</td></tr>
    <tr><td>Row 5</td><td>Row 5</td><td>Row 5</td></tr>
    <tr><td>Row 6</td><td>Row 6</td><td>Row 6</td></tr>
    <tr><td>Row 7</td><td>Row 7</td><td>Row 7</td></tr>
    <tr><td>Row 8</td><td>Row 8</td><td>Row 8</td></tr>
  </tbody>
</table>

CSS样式

.fixed-header-table {
  width: 100%; /* 表格整体用百分比宽度 */
  border-collapse: collapse;
}

.fixed-header-table thead {
  display: block;
  width: 100%; /* 和表格宽度保持一致 */
  color: #fff;
  background: #000;
}

.fixed-header-table tbody {
  display: block;
  width: 100%; /* 同样和表格宽度一致 */
  height: 200px; /* 固定内容区高度，触发滚动 */
  background: #f8f8f8;
  overflow-y: auto; /* 只垂直滚动，避免水平滚动 */
}

.fixed-header-table th,
.fixed-header-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #fff;
}

/* 最后一列去掉左边框，避免重复 */
.fixed-header-table th:last-child,
.fixed-header-table td:last-child {
  border-left: none;
}

注意事项 #

• 所有th的宽度百分比总和要等于100%，对应的td也要和th一一对应，不然会出现列错位
• 如果需要水平滚动，可以把overflow-y改成overflow:auto，但建议尽量让内容适配宽度，避免水平滚动影响体验
• 这种方案依赖display:block，所以表格的一些原生特性（比如列自动调整）会失效，但这是固定表头的常见 trade-off

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