Remove border and space between <td>, but keep between <tr> and 2 columns (each of 3 cells)

Question

I have a table with 6 columns and want 3 on both sides to have no border and space between the cells, so at then end having 2 columns with 3 cells on each side.

To keep the border between the rows I let border-collapse:separate and only set border-spacing horizontal to 0px.

But now the two columns with 3 cells on each side also have 0px spacing between them, but what I want them to be 2px (the same spacing as between the rows). Setting border-spacing back to 2px results in a small gap within the top and bottom border line.

I assume my complete approach with the border-collapse doesn't help me to get the layout I want to.

Any ideas? Here's the fiddle: 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

One, slightly more complex approach, is to use CSS' :nth-child() pseudo-class to style the elements, which has the advantage of being immediately expandable should another three <td> elements be added to the rows:

/* 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>

Or, with some slightly less complicated selectors:

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>

Answer 2

It took a while but I found a very simple solution. I just added another cell as 'gap'
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;
}