CSS - Removing border-spacing on first and last columns

Question

I'm trying to style a table by separating each inner column with a 3px white border, like this:

So far I've tried a couple of approaches but I'm having a heck of a time. First, I tried setting a right border for each td element, but I found the border broke through the overall table border creating gaps in the outer border. Here's the code and the fiddle:

HTML:

<table class="grid">
<tr><td>Heading 1</td><td>Heading 2</td><td>Heading 3</td></tr>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td></tr>
</table>

CSS:

.grid {
    font-family: segoe ui, calibri, arial, sans-serif;
    font-size: 12px;
    color: #5B636B;
    border: 1px solid #CCC;
    border-collapse: collapse;
    background-color: #FFF;
}

.grid tr {
    height: 30px;
    border-bottom: 1px solid #F4F4F4;
}

.grid tr:first-child {
    border: none;
    background-color: #ECEEF4;
}

.grid tr:last-child {
    border: none;
}

.grid td {
    padding: 0px 5px 0px 5px;
    border-right: 3px solid #FFF;
}

FIDDLE: Fiddle here.

The next approach I tried was to remove border-collapse: collapse and try to leverage the table's own cell spacing to achieve what I wanted. While I could remove the vertical spacing by using border-spacing, I couldn't figure out how to remove the horizontal spacing from the far left and far right cells.

Here's the code for that approach:

HTML:

<table class="grid">
<tr><td>Heading 1</td><td>Heading 2</td><td>Heading 3</td></tr>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td></tr>
</table>

CSS:

.grid {
    font-family: segoe ui, calibri, arial, sans-serif;
    font-size: 12px;
    color: #5B636B;
    border: 1px solid #CCC;
    border-collapse: separate;
    border-spacing: 5px 0px;
    background-color: #FFF;
}

.grid tr {
    height: 30px;
    border-bottom: 1px solid #F4F4F4;
}

.grid tr:first-child {
    border: none;
    background-color: #ECEEF4;
}

.grid tr:last-child {
    border: none;
}

.grid td {
    padding: 0px 5px 0px 5px;
}

I've also seen a suggestion that I could use the td:first-child and subsequently td:first-child + td, td:first-child + td + td and so on, but that seems awfully messy and not really practical because I don't know how many columns I'll have in the end and it could vary over time. (I would have posted a link to this post but as I'm new I can't post more than two links - its title is "HTML: How to style each table cell in a column via CSS?")

I'm also not keen on using empty columns, really just because it seems like there ought to be a better CSS alternative.

Could you help?

Answer 1

Here's a way of doing this (based on your second example):

Remove border-spacing from the table and then add a right border in every td, except the last one.

.grid td {
  padding: 0px 5px 0px 5px;
  border-right: 3px solid white;
}

.grid td:last-child {
  border-right: 0;   
}

jsFiddle Demo