html - 表td中的边界半径和边界一起

我想给我的第一个和最后一个<td>一个border-radius,以便我的表看起来像一个圆桌。

首先,我将背景应用于<td>,然后添加了border-radius,效果很好(我认为背景是圆角的)。

之后,当对我的<td>应用边框时,我看到了一个奇怪的东西(请参见下面的代码片段)。

因此,我的问题是为什么边框没有四舍五入为背景?

堆栈片段

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

最佳答案

尝试border-collapse: inherit;并设置'border-spacing:0px;'

table {
  width: 100%;
  border-collapse: inherit;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
  border-radius: 30px;
  border-spacing: 0px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
  border-left: none;
}
table td:first-child{
  border-left: 1px solid #000000;
}
table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>