HTML Tables: How to get continuous vertical and interrupted horizontal lines

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.

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

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

score 2 · Accepted Answer · edited May 23 '17 at 12:07

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):

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

See code snipped for complete css and rendered output.

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;
}

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

score 0 · Answer 2 · answered Aug 12 '15 at 05:10

border-collapse: collapse allows to set borders to the rows, check this:

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;
}

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

I've notice a little difference between your image and my table, here's another table that looks closer to your sample though it's not semantically perfect http://jsfiddle.net/uhggchxb/ — Cheslab, Aug 12 '15 at 05:42
Thanks Cheslab for helping me on this. I also thought about adding "fake" columns, but actually isn't an option, as I can't modify the table markup. I now added this restriction to the issue post. — LarS, Aug 12 '15 at 14:06

HTML Tables: How to get continuous vertical and interrupted horizontal lines

2 Answers2