HTML表格边框圆角设置问题：单元格圆角但表格整体无圆角

问题根源 #

当表格默认使用border-collapse: separate时，单元格（td/th）的边框是独立于表格本身的，即便给表格设置了border-radius，单元格的直角边框也会覆盖表格的圆角效果。如果直接设置border-collapse: collapse合并边框，表格的border-radius通常也不会生效——因为合并后的边框本质是由单元格边框拼接而成的。

两种可行解决方法 #

方法1：border-collapse: separate + 溢出隐藏 #

通过让表格边框与单元格无缝衔接，再用overflow: hidden裁剪单元格超出的直角边框：

<table class="rounded-table">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

.rounded-table {
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格间距 */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden; /* 关键：裁剪单元格超出的直角边框 */
}

.rounded-table th, .rounded-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
}

/* 可选：去除单元格重复边框，让样式更整洁 */
.rounded-table tr th:not(:last-child),
.rounded-table tr td:not(:last-child) {
  border-right: none;
}
.rounded-table tr:not(:last-child) th,
.rounded-table tr:not(:last-child) td {
  border-bottom: none;
}

方法2：外层容器包裹 + border-collapse: collapse #

如果必须使用边框合并，给表格套一个容器，用容器的圆角和溢出隐藏来实现整体圆角：

<div class="table-wrapper">
  <table class="collapsed-table">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
    </tbody>
  </table>
</div>

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.collapsed-table {
  width: 100%;
  border-collapse: collapse;
}

.collapsed-table th, .collapsed-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
}

核心注意点 #

• overflow: hidden是实现整体圆角的关键，它会把单元格超出表格（或容器）的直角部分裁剪掉；
• 确保表格和单元格的边框颜色、宽度一致，避免出现缝隙或突兀线条。

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