如何在表格行周围有边框，但在任何内部单元格上没有边框？

Question

我想要一个这样的表，我有多行，但没有内垂直线。这意味着桌子周围有一个完整的边框，但没有内部列边框。具体来说，我希望具有这样的功能，但是每行和弯曲的边缘之间要有间距，如以下示例代码所示：https://jsfiddle.net/n14ye7nk/

body {
  font-family: sans-serif;
}

#table {
  border-spacing: 0.3em;
}

#table td {
  border: 2px solid #30c;
  border-radius: 0.4em;
  padding: 1em;
  text-align: center;
}

Answer 1

不幸的是，表格并非真正按照您的要求设计的。

要使行而不是单元格具有边框，只需将border规则移至#table tr选择器，然后将border-collapse: collapse添加至<table>元素本身。

body {
  font-family: sans-serif;
}

#table {
  border-collapse: collapse;
  border-spacing: 0.3em;
}

#table tr {
  border: 2px solid blue;
}

#table td {
  padding: 1em;
  text-align: center;
}

<table id="table">
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>a table</td>
    </tr>
    <tr>
      <td>with</td>
      <td>rounded</td>
      <td>cells</td>
    </tr>
  </tbody>
</table>

可以使用border-collapse: separate完成表格行间距...尽管这不允许有边框。

请注意，两种方法都不允许将border-radius应用于tr。最好的方法是简单地在<td>元素:first-child和:last-child上设置各个角半径。请注意，您需要cellspacing="0"本身上的<table>。

body {
  font-family: sans-serif;
}

#table td {
  padding: 1em;
  text-align: center;
}

#table tr:first-of-type td {
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
}

#table tr:last-of-type td {
  border-bottom: 2px solid blue;
}

#table tr:first-child td:first-child {
  border-left: 2px solid blue;
  border-top-left-radius: 10px;
}

#table tr:first-child td:last-child {
  border-right: 2px solid blue;
  border-top-right-radius: 10px;
}

#table tr:last-child td:first-child {
  border-left: 2px solid blue;
  border-bottom-left-radius: 10px;
}

#table tr:last-child td:last-child {
  border-right: 2px solid blue;
  border-bottom-right-radius: 10px;
}

<table id="table" cellspacing="0">
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>a table</td>
    </tr>
    <tr>
      <td>with</td>
      <td>rounded</td>
      <td>cells</td>
    </tr>
  </tbody>
</table>

再次，这并不理想。

处理此问题的最佳方法实际上是用<div>元素代替表。这样，您可以利用calc()中的width确保间距均匀，float: left控制一行中有多少个元素，而margin-bottom使用之间的空格行。您还只需要在border-radius本身上应用核心.row：

.row {
  font-family: sans-serif;
  border: 2px solid blue;
  border-radius: 10px;
}

.row div {
  display: inline-block;
  text-align: center;
  padding: 1em;
  width: calc(100% / 3 - (3px + 2em));

}

.row:first-of-type {
  margin-bottom: 20px;
}

<div class="row">
  <div>this</div>
  <div>is</div>
  <div>a table</div>
</div>
<div class="row">
  <div>with</div>
  <div>rounded</div>
  <div>cells</div>
</div>