如何为带overflow:auto的Grid布局表格设置border-radius？

我用Grid CSS做了一个表格，设置overflow:auto后无法正常显示border-radius。试过给表头和表体分别设置overflow，但二者会独立滚动，需要实现同步滚动的同时，滚动时圆角始终保留在表格边框处。

当前效果 #

期望效果 #

现有代码 #

CSS #

thead, table, tbody, tr, th, td { 
  display: block 
}

.table__row {
  grid-template-columns: 74px 170px 170px 170px 170px 170px 170px 170px 170px 170px 170px;
  display: grid;
  grid-gap: 1px;
}

.table {
    display: grid;
    width: 1000px;
    margin: 0 auto;
    overflow: auto;
}

.table__head {
    background-color: #EDEFF4;
    padding: 20px 0;
    height: 64px;
}

.table__body {
    display: grid;
    border-radius: 16px;
}

.table__cell {
    padding: 12px 16px;
}

.table__body .table__cell {
    background-color: #747C8C;
    border-bottom: 1px solid #E2E4F6;
}

HTML #

<table class="table">
      <thead class="table__head">
        <tr class="table__row">
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
        </tr>
      </thead>
      <tbody class="table__body">
        <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
      </tbody>
    </table>

解决方案 #

核心思路是给表格套一个外层容器，由容器负责显示border-radius和裁剪内容，表格本身负责滚动，这样既能保留圆角，又能保证表头和表体同步滚动。

修改后的代码 #

CSS 新增及调整部分

/* 新增外层容器 */
.table-container {
  width: 1000px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden; /* 裁剪内部内容，保证圆角生效 */
}

/* 调整.table样式，去掉width，由容器控制 */
.table {
    display: grid;
    overflow: auto; /* 保留滚动功能 */
    /* width: 1000px; 移除 */
    /* margin: 0 auto; 移除，由容器控制 */
}

/* 去掉.table__body的border-radius，不再需要 */
.table__body {
    display: grid;
    /* border-radius: 16px; 移除 */
}

/* 可选：给表头加底部边框，和表体衔接更自然 */
.table__head {
    background-color: #EDEFF4;
    padding: 20px 0;
    height: 64px;
    border-bottom: 1px solid #E2E4F6;
}

HTML 修改部分

<!-- 给table套上容器 -->
<div class="table-container">
  <table class="table">
    <!-- 原有thead和tbody内容不变 -->
  </table>
</div>

原理说明 #

• 外层容器的overflow:hidden会将表格超出容器的部分裁剪掉，同时容器的border-radius会形成整体的圆角效果，滚动时表格内容不会突破圆角边界。
• 表格本身保留overflow:auto，负责处理横向/纵向滚动，表头和表体属于同一个滚动容器，自然实现同步滚动。

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