Question: I need to style a html table with different grid-lines. The horizontal lines should be continuous (foreground) and the vertical lines interrupted like as they where in the background, overlaid by the horizontal lines. Some horizontal lines should be 1px and others 2px height the vertical lines/borders should be 3px, but there should be no space or border on the left and right side of the table (so that the table has 100% width and appears left and right justified). The result should look like attached image. Any help appreciated.

I experimented with `border-collapse: separate;` and different `border-spacing`, but I can't get the different horizontal line-heights or the table has a border on the left and right.

[![image of how the result should look like](https://i.stack.imgur.com/NlBRP.jpg)](https://i.stack.imgur.com/NlBRP.jpg)

See snippet for table structure. The html could not be changed, i.e. I can't add fake columns.

```html
    <table>
      <thead>
        <tr>
          <th>th-1</th>
          <th>th-2</th>
          <th>th-3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>tr-1, td-1</td>
          <td>tr-1, td-2</td>
          <td>tr-1, td-3</td>
        </tr>
        <tr>
          <td>tr-2, td-1</td>
          <td>tr-2, td-2</td>
          <td>tr-2, td-3</td>
        </tr>
      </tbody>
    </table>
```

Answer: 
To get the horizontal lines overlaying the vertical lines (border) use border-spacing:

```
table {
  border-collapse: separate;
  border-spacing: 0px 1px;
}

```

Than add an extra space between thead and tbody (*idea from different stackoverflow issue [Spacing between thead and tbody](https://stackoverflow.com/a/9260996/880188)*):

```
thead:after {
  display: block;
  height: 0px;
  content: "";
  border: none;
}

```

See code snipped for complete css and rendered output.

```css
table {
    /* Create border between rows.*/
    border-collapse: separate;
    border-spacing: 0px 1px ;
    background-color: #697a91;
    width: 100%;
}
thead:after {
    /* Increase border between thead and tbody.*/
    display: block;
    height: 0px;
    content: "";
    border: none;
}
th {
    background-color: #dce0e6;
    text-align: center;
}
th,
td {
    padding: 0.5em;
    border-right: 3px solid white;
}
th:last-child,
td:last-child {
    border: none;
}
td {
    background-color: #eff4f6;
}
```

```html
<table>
  <thead>
    <tr>
      <th>th-1</th>
      <th>th-2</th>
      <th>th-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tr-1, td-1</td>
      <td>td-2</td>
      <td>td-3</td>
    </tr>
    <tr>
      <td>tr-2, td-1</td>
      <td>td-2</td>
      <td>td-3</td>
    </tr>
  </tbody>
</table>
```
`border-collapse: collapse` allows to set borders to the rows, check this:

```css
body {
    margin: 0;
}
table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
table tr {
    background-color: #f4f8f9;
    border-top: 1px solid #78858e;
    border-bottom: 1px solid #78858e;
}
table tr:first-child {
    background-color: #e1e7e7;
    border-bottom: 2px solid #78858e;
}
table td {
    border-right: 3px solid white;
}
table td:last-child {
    border-right: none;
}
```

```html
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td rowspan="2">4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>
```