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

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.