如何在 table 行周围设置边框，但不在任何内部单元格上设置边框？

Question

我想要一个 table 这样我有多行，但没有内部垂直线。这意味着 table 周围有一个完整的边框，但没有列内边框。具体来说，我希望能够拥有它，但每行和弯曲边缘都有间距，如示例代码所示：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

不幸的是，table 并不是真正为满足您的要求而设计的。

为了在行而不是单元格周围设置边框，只需将 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>

Table 行间距可以用 border-collapse: separate 完成...虽然这不允许边框。

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

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>

同样，这并不理想。

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

.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>

如何在 table 行周围设置边框，但不在任何内部单元格上设置边框？

How can I have borders around the table row, but not on any inner-cells?

html

css-tables