删除 <td> 之间的边框和空格，但保留在 <tr> 和 2 列之间（每列 3 个单元格）

Question

我有一个有 6 列的表格，并且希望两边的 3 列在单元格之间没有边框和空间，所以最后有 2 列，每侧有 3 个单元格。

为了保持行之间的边框，我让border-collapse:separate 并且只将边框间距水平设置为 0px。

但是现在每边有 3 个单元格的两列之间也有 0px 间距，但我希望它们是 2px（与行之间的间距相同）。 将边框间距设置回 2px 会导致顶部和底部边框线之间出现小间隙。

我认为我使用边框折叠的完整方法并不能帮助我获得想要的布局。

有什么想法吗？这是小提琴：Link

<fieldset>
<legend>content 1</legend>
    <table>
        <tr>
            <td class="cell1">r1c1</td>
            <td class="cell2">r1c2</td>
            <td class="cell3">r1c3</td>
            <td class="cell4">r1c4</td>
            <td class="cell5">r1c5</td>
            <td class="cell6">r1c6</td>
        </tr>
        <tr>
            <td class="cell1">r2c1</td>
            <td class="cell2">r2c2</td>
            <td class="cell3">r2c3</td>
            <td class="cell4">r2c4</td>
            <td class="cell5">r2c5</td>
            <td class="cell6">r2c6</td>
        </tr>
        <tr>
            <td class="cell1">r3c1</td>
            <td class="cell2">r3c2</td>
            <td class="cell3">r3c3</td>
            <td class="cell4">r3c4</td>
            <td class="cell5">r3c5</td>
            <td class="cell6">r3c6</td>
        </tr>
        <tr>
            <td class="cell1">r4c1</td>
            <td class="cell2">r4c2</td>
            <td class="cell3">r4c3</td>
            <td class="cell4">r4c4</td>
            <td class="cell5">r4c5</td>
            <td class="cell6">r4c6</td>
        </tr>
    </table>
</fieldset>







body {
background:white;
//width:950px;
margin:auto;
font:normal normal normal 14px/120% Arial, Helvetica, sans-serif;
padding:20px;
margin-bottom:30px;
}


fieldset {
width:400px;
margin:auto;
}

table {
border-collapse: separate;
border-spacing: 0px 2px;
text-align: center; 
}
table td.cell1,table td.cell4 {
border: 1px solid black;
border-right:none;
width:50px;
}
table td.cell2,table td.cell5 {
border: 1px solid black;
border-right:none;
border-left:none;
width:80px;
}
table td.cell3,table td.cell6 {
border: 1px solid black;
border-left:none;
width:60px;
}

Answer 1

花了一段时间，但我找到了一个非常简单的解决方案。我刚刚添加了另一个单元格作为“间隙”
Link to fiddle

HTML：

    <tr>
        <td class="cell1">r1c1</td>
        <td class="cell2">r1c2</td>
        <td class="cell3">r1c3</td>
        <td class="gap_hor"></td>
        <td class="cell4">r1c4</td>
        <td class="cell5">r1c5</td>
        <td class="cell6">r1c6</td>
    </tr>

CSS：

table td.gap_hor {
border:none;
width:10px;
}

Answer 2

一种稍微复杂一点的方法是使用 CSS 的 :nth-child() 伪类来设置元素的样式，如果将另外三个 <td> 元素添加到行中，它的优点是可以立即展开：

/* Styling the common features: */
td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
}
/* removing the border on the left and right of the middle
   cell from each group of three: */
td:nth-child(2n) {
  border-left-width: 0;
  border-right-width: 0;
}
/* removing the right border from the preceding cell: */
td:nth-child(2n-1) {
  border-right-width: 0;
}
/* removing the left border from the following cell: */
td:nth-child(2n+1) {
  border-left-width: 0;
}
/* restoring the left border on the first cell matched by
   the (2n+1) rule: */
td:first-child {
  border-left-width: 1px;
}
/* restoring the border-right on the last-cell: */
td:last-child {
  border-right-width: 1px;
}
/* adding padding-right to the third of each group of three */
td:nth-child(3n) {
  padding-right: 5px;
}
/* adding padding left to the first cell of each group of three,
   and relative positioning: */
td:nth-child(3n + 1) {
  position: relative;
  padding-left: 5px;
}
/* creating a pseudo-element to replace the borders, and
   emulate a separating column: */
td:nth-child(3n + 1)::after {
  content: '';
  position: absolute;
  width: 10px;
  top: -1px;
  bottom: -1px;
  left: -5px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-color: #fff;

}
/* hiding the pseudo-element from the first cell: */
td:first-child::after {
  width: 0;
  height: 0;
  border-width: 0;
}

body {
  background: white;
  //width:950px;
  margin: auto;
  font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;
  padding: 20px;
  margin-bottom: 30px;
}
fieldset {
  width: 400px;
  margin: auto;
}
table {
  border-collapse: separate;
  border-spacing: 0px 2px;
  text-align: center;
}

td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
}

td:nth-child(2n) {
  border-left-width: 0;
  border-right-width: 0;
}
td:nth-child(2n-1) {
  border-right-width: 0;
}
td:nth-child(2n+1) {
  border-left-width: 0;
}
td:first-child {
  border-left-width: 1px;
}
td:last-child {
  border-right-width: 1px;
}

td:nth-child(3n) {
  padding-right: 5px;
}

td:nth-child(3n + 1) {
  position: relative;
  padding-left: 5px;
}

td:nth-child(3n + 1)::after {
  content: '';
  position: absolute;
  width: 10px;
  top: -1px;
  bottom: -1px;
  left: -5px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-color: #fff;
  
}

td:first-child::after {
  width: 0;
  height: 0;
  border-width: 0;
}

<fieldset>
  <legend>content 1</legend>
  <table>
    <tr>
      <td class="cell1">r1c1</td>
      <td class="cell2">r1c2</td>
      <td class="cell3">r1c3</td>
      <td class="cell4">r1c4</td>
      <td class="cell5">r1c5</td>
      <td class="cell6">r1c6</td>
      <td class="cell7">r1c7</td>
      <td class="cell8">r1c8</td>
      <td class="cell9">r1c9</td>
    </tr>
    <tr>
      <td class="cell1">r2c1</td>
      <td class="cell2">r2c2</td>
      <td class="cell3">r2c3</td>
      <td class="cell4">r2c4</td>
      <td class="cell5">r2c5</td>
      <td class="cell6">r2c6</td>
      <td class="cell7">r2c7</td>
      <td class="cell8">r2c8</td>
      <td class="cell9">r2c9</td>
    </tr>
    <tr>
      <td class="cell1">r3c1</td>
      <td class="cell2">r3c2</td>
      <td class="cell3">r3c3</td>
      <td class="cell4">r3c4</td>
      <td class="cell5">r3c5</td>
      <td class="cell6">r3c6</td>
      <td class="cell7">r3c7</td>
      <td class="cell8">r3c8</td>
      <td class="cell9">r3c9</td>
    </tr>
    <tr>
      <td class="cell1">r4c1</td>
      <td class="cell2">r4c2</td>
      <td class="cell3">r4c3</td>
      <td class="cell4">r4c4</td>
      <td class="cell5">r4c5</td>
      <td class="cell6">r4c6</td>
      <td class="cell7">r4c7</td>
      <td class="cell8">r4c8</td>
      <td class="cell9">r4c9</td>
    </tr>
  </table>
</fieldset>

或者，使用一些稍微不那么复杂的选择器：

td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
  border-left-width: 0;
  border-right-width: 0;
}

td:first-child {
  border-left-width: 1px;
}

td:last-child {
  border-right-width: 1px;
}

td:nth-child(3n) {
  padding-right: 5px;
}

td:first-child ~ td:nth-child(3n+1) {
  padding-left: 5px;
  position: relative;
}

td:first-child ~ td:nth-child(3n+1)::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -5px;
  width: 10px;
  background-color: #fff;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

body {
  background: white;
  //width:950px;
  margin: auto;
  font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;
  padding: 20px;
  margin-bottom: 30px;
}
fieldset {
  width: 400px;
  margin: auto;
}
table {
  border-collapse: separate;
  border-spacing: 0px 2px;
  text-align: center;
}

td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
  border-left-width: 0;
  border-right-width: 0;
}

td:first-child {
  border-left-width: 1px;
}

td:last-child {
  border-right-width: 1px;
}

td:nth-child(3n) {
  padding-right: 5px;
}

td:first-child ~ td:nth-child(3n+1) {
  padding-left: 5px;
  position: relative;
}

td:first-child ~ td:nth-child(3n+1)::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -5px;
  width: 10px;
  background-color: #fff;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

<fieldset>
  <legend>content 1</legend>
  <table>
    <tr>
      <td class="cell1">r1c1</td>
      <td class="cell2">r1c2</td>
      <td class="cell3">r1c3</td>
      <td class="cell4">r1c4</td>
      <td class="cell5">r1c5</td>
      <td class="cell6">r1c6</td>
      <td class="cell7">r1c7</td>
      <td class="cell8">r1c8</td>
      <td class="cell9">r1c9</td>
    </tr>
    <tr>
      <td class="cell1">r2c1</td>
      <td class="cell2">r2c2</td>
      <td class="cell3">r2c3</td>
      <td class="cell4">r2c4</td>
      <td class="cell5">r2c5</td>
      <td class="cell6">r2c6</td>
      <td class="cell7">r2c7</td>
      <td class="cell8">r2c8</td>
      <td class="cell9">r2c9</td>
    </tr>
    <tr>
      <td class="cell1">r3c1</td>
      <td class="cell2">r3c2</td>
      <td class="cell3">r3c3</td>
      <td class="cell4">r3c4</td>
      <td class="cell5">r3c5</td>
      <td class="cell6">r3c6</td>
      <td class="cell7">r3c7</td>
      <td class="cell8">r3c8</td>
      <td class="cell9">r3c9</td>
    </tr>
    <tr>
      <td class="cell1">r4c1</td>
      <td class="cell2">r4c2</td>
      <td class="cell3">r4c3</td>
      <td class="cell4">r4c4</td>
      <td class="cell5">r4c5</td>
      <td class="cell6">r4c6</td>
      <td class="cell7">r4c7</td>
      <td class="cell8">r4c8</td>
      <td class="cell9">r4c9</td>
    </tr>
  </table>
</fieldset>