CODEWITHSUNDEEP
htmlcsscss-tables
user429620
user429620

Reputation:

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 to have the border-bottom take precedence? Like a z-index of sorts?

I have tried both border-collapse:collapse and border-collapse:separate.

The only thing that is working is if I make the red line thicker, but I want it to have the same width.

table { 
  width:100%;
  border:1px solid blue;
  border-collapse:separate;
}
th, td {
  border:1px solid yellow;
  padding:5px;
}
th {
  background:black;
  color:white;
}
th {
  border-bottom:1px solid red !important;
} 
td {
  background:#efefef;
}

​

Upvotes: 0

Views: 7774

Answers (1)

David Thomas
David Thomas

Reputation: 253308

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:

<table cellpadding="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;
}

th div, td {
    border: 1px solid red;
}

th div {
    border-bottom-width: 0;
}

JS Fiddle demo.

Upvotes: 1

Related Questions