如何在CSS display:table中固定顶部TR或设置为sticky？

完全可以实现，核心是利用position: sticky，但因为display:table的布局特性，直接给<tr>设置sticky不生效，需要作用在表头单元格上，配合容器的滚动设置就能达到需求。

实现步骤与代码示例 #

1. 给表格套一个容器，设置固定高度和垂直滚动
2. 给表头的<th>设置position: sticky和top: 0
3. 注意表头的背景色和表格的边框合并规则，避免滚动时内容穿透

HTML结构

<div class="table-scroll-container">
  <table class="display-table">
    <tr>
      <th>产品名称</th>
      <th>库存数量</th>
      <th>单价</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>无线耳机</td>
      <td>120</td>
      <td>299</td>
      <td>编辑/删除</td>
    </tr>
    <tr>
      <td>蓝牙音箱</td>
      <td>85</td>
      <td>399</td>
      <td>编辑/删除</td>
    </tr>
    <!-- 更多数据行 -->
  </table>
</div>

CSS样式

.table-scroll-container {
  height: 350px; /* 自定义滚动区域高度 */
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  /* 响应式适配：小屏幕允许横向滚动 */
  overflow-x: auto;
}

.display-table {
  width: 100%;
  border-collapse: collapse;
  display: table; /* 保持display:table属性 */
}

.display-table th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* 必须设置背景色，防止内容穿透 */
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
}

.display-table th,
.display-table td {
  padding: 10px 14px;
  border: 1px solid #dee2e6;
  text-align: left;
}

/* 响应式优化：小屏幕缩小内边距 */
@media (max-width: 768px) {
  .display-table th,
  .display-table td {
    padding: 6px 8px;
  }
}

关键注意点 #

• 不要直接给<tr>设置position: sticky：因为display:table-row类型的元素不支持sticky定位，必须作用在<th>（table-cell类型）上。
• 容器必须设置overflow-y: auto和固定高度：没有滚动容器的话，sticky元素只会相对于视窗固定，无法实现表格内部滚动时表头固定。
• 背景色是必须的：如果表头没有背景色，滚动时下方的内容会透过表头显示出来，影响视觉效果。
• 响应式适配：可以通过媒体查询调整容器高度、单元格内边距，或者开启横向滚动，确保在小屏幕上依然可用。

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