如何实现表头固定、表身可滚动且带圆角的表格？

问题分析与修改要点 #

1. 表格圆角不显示 #

原代码里border-collapse: collapse会直接抵消圆角效果，同时没有给容器或表格设置圆角属性，内部元素溢出也会破坏圆角展示。

2. tbody行与滚动条空隙 #

将tbody设为display:block后，表头行（默认table-row布局）和表身行列宽不匹配，加上tbody宽度计算偏差，导致右侧出现间隙。

修改后的完整代码 #

HTML 代码 #

<div class="col-lg-4 table-container">
  <table>
    <thead>
      <tr>
        <th class="table_header">DEPARTMENTS</th>
      </tr>
    </thead>
    <tbody class="scrollable-body">
      <tr *ngFor="let department of departments">
        <td>{{ department }}</td>
      </tr>
    </tbody>
  </table>
</div>

CSS 代码 #

.table-container {
  max-height: 200px;
  border-radius: 8px; /* 容器设置圆角 */
  overflow: hidden; /* 隐藏内部溢出，保证圆角生效 */
  border: 1px solid #ccc; /* 统一外边框，避免表头表身视觉错位 */
}

.table_header {
  padding: 8px; /* 替换原5%内边距，避免布局变形 */
  color: #015468;
}

table {
  width: 100%;
  border-collapse: separate; /* 替换collapse，让圆角可生效 */
  border-spacing: 0; /* 消除单元格间隙 */
  table-layout: fixed;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
}

/* 表头单元格设置顶部圆角 */
thead th:first-child {
  border-top-left-radius: 8px;
}
thead th:last-child {
  border-top-right-radius: 8px;
}

/* 表身最后一行设置底部圆角 */
tbody.scrollable-body tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
tbody.scrollable-body tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

tbody.scrollable-body {
  display: block;
  max-height: calc(200px - 40px); /* 减去表头高度，避免双重滚动 */
  overflow-y: auto;
  width: 100%; /* 保证tbody宽度与表格一致 */
}

/* 统一表头和表身行的布局，确保列宽匹配 */
thead tr, tbody.scrollable-body tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  border-bottom: none; /* 去掉重复的底部边框 */
}

/* 表身最后一行单元格添加底部边框 */
tbody.scrollable-body tr:last-child td {
  border-bottom: 1px solid #ccc;
}

修改说明 #

• 圆角实现：把border-collapse改为separate，外层容器加圆角和溢出隐藏，再分别给表头顶部、表身底部的单元格设置对应圆角，保证整体圆角效果完整。
• 消除滚动条间隙：让表头行和表身行统一使用display:table和table-layout:fixed，强制列宽一致；调整tbody的最大高度，避免容器和tbody双重滚动；设置tbody宽度100%，消除右侧空隙。
• 细节优化：统一内边距，调整边框样式避免重复，让整体视觉更协调。

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