Table Border Overlap

please see this example: http://jsfiddle.net/qTjdX/ I want the red border-bottom to show as 1 solid line, but right now the yellow border is splitting it up in 3. Is there any way

Solution 1:

The problem you're having is because the border is composed of four separate sides, which meet at 45 degree angles at the corners, which is rounded in various ways. So having a bottom-border a different color to that of the sides will always cause the borders to break.

If you look at this demo:

div {
    float: left;
    border-width: 25px;
    border-style: solid;
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

JS Fiddle demo.

You can see how the various borders meet, because a pixel can't be subdivided this leads to the corner-pixels being the same solid colour as one of the sides and therefore a different colour, if the colours are different, to the other side with which it connects.

To compensate the only option you really have is to use a nested element within the th:

<tablecellpadding="0"cellspacing="0"><thead><tr><th><div>col 1</div></th><th><div>col 2</div></th><th><div>col 3</div></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table>

With the following CSS:

table { 
    width:100%;
    border:1px solid blue;
    border-collapse:collapse;
}

th {
    border-bottom: 2px solid yellow;
}

thdiv, td {
    border: 1px solid red;
}

thdiv {
    border-bottom-width: 0;
}

JS Fiddle demo.