how to remove border-spacing gaps from zebra stripes

Question

I have a table that has both border-spacing and zebra striping. But when border-spacing and zebra striping are combined, the combination results in gaps between the columns rather than a smooth stripe. For example, in the table below there is an unsightly gap between Peach and Yes.

How can I keep the border-spacing, but remove those gaps in the zebra stripes?

Fiddle: http://jsfiddle.net/Bridgeland/xCBR9/

CSS:

table {
   border-spacing: 15px;
}
tr:nth-child(even) {
   background-color: #c4d8fd;   
}

Answer 1

Use padding instead of border-spacing.

td,th{
    padding: 10px 0px;
}

This way you only set top/bottom padding, not left/right.

http://jsfiddle.net/xCBR9/4/

Answer 2

How about this? Updated JSFiddle

table {
    border-collapse:collapse;
}

table td { padding:10px 0; }
tr:nth-child(even) {
    background-color: #c4d8fd;   
}

Set a padding on the table cells, and use border-collapse:collapse on the table itself to remove the extra border.

Answer 3

don't add the border-spacing: 15px; to the table, add the spacing to td, or tr

such as here http://jsfiddle.net/feitla/Rzsvm/

Answer 4

add spacing in your td:

table {
 border-spacing: 0px;
}
tr:nth-child(even) {
    background-color: #c4d8fd;   
}
td{
    padding:0 15px 0 15px;
}

http://jsfiddle.net/X8MfB/