thead border bottom, remove space between columns

Question

I just want a solid blue line underneath my table header, right now there are little white separations in between each column because the styling is on each th.

thead th {
    border-bottom: 4px solid #D3E6F5;
    padding-bottom: 20px;
}

Here is my JSFiddle.

Answer 1

Add cellspacing = "0" html attribute or CSS property border-spacing: 0 to your table element.

Example with cellspacing attribute

Example with border-spacing CSS property