如何在不加倍边框或使用边框折叠的情况下圆桌边框？

Question

我一直在尝试使用我为圆桌角找到的 Stack Ooverflow 答案：

/* 
table {
    border-collapse: collapse;
}*/

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
  /*padding: 10px;*/
}

table{
    border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

这很好用。但如果我取消注释 border-collapse，则舍入消失。如果我取消注释padding: 10px，它会使边框加倍：

我需要border-collapse 来避免粗体内部边框。我需要padding 以便表格单元格中的文本与其边界有距离。如何在具有圆形外边框的同时实现它？

JSFiddle：https://jsfiddle.net/eszuhvxj/1/

Answer 1

您可以删除 td 的顶部和右侧边框：

table {
  border-collapse: separate;
  border:none;
  border-spacing: 0;
  width: 30em;
  --radius-border: 15px;
}
table td, table th {
  border: 1px solid; 
  text-align: center;
  padding: 10px;
}
table td  {
  border-top: none;
}
table tr:last-child td:first-child{
  border-bottom-left-radius: var(--radius-border);
}
table tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-border);
}
table tr:first-child th:first-child {
  border-top-left-radius: var(--radius-border);
}
table tr:first-child th:last-child {
  border-top-right-radius: var(--radius-border);
}
table tr th:not(:last-child),
table tr td:not(:last-child) {
  border-right: none;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Answer 2

解决办法如下：

table {
    border-spacing: 0;
    width: 100%;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
    text-align:center;
}
/* the first 'th' within the first 'tr' of the 'thead': */
 tr:first-child th:first-child {
    border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
 tr:first-child th:last-child {
    border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
 tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
 tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>