Table with spacing to have a solid background all the way through

Question

I have alternating background colors however they have breaks in-between them due to the large spacing. I want the color to run through as though there was no spacing, so a solid bar all the way through.

tr:nth-child(even) {
    background-color: #FFFFFF;
}
tr:nth-child(odd) {
    background-color: #000000;
}

Use `border-collapse: collapse;`. – Josh Crozier Jan 19 '14 at 04:13 — Josh Crozier, Jan 19 '14 at 04:13

score 0 · Accepted Answer · answered Jan 19 '14 at 04:14

0

table{
    border-collapse: collapse; /* add this one */
}

Demo with issue
Demo without issue

answered Jan 19 '14 at 04:14

Roko C. Buljan

196,159
39
305
313

score 0 · Answer 2 · answered Jan 19 '14 at 04:38

In the table tag itself, use cellspacing="0" and cellpadding="0" to achieve the same effect but for browsers that don't (or poorly) support the border-collapse attribute.

You may also want to restore the lost space without creating gaps:

td{padding:2px 4px}

Table with spacing to have a solid background all the way through

2 Answers2