时间戳

首页 > 解决方案 > 如何在不加倍边框或使用边框折叠的情况下圆桌边框？

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

问题描述

我一直在尝试使用我为圆桌角找到的 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/

标签： htmlcsshtml-table

解决方案

您可以删除 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>

推荐阅读