How can I make my border-bottom not overwrite my border for my table?

Question

How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray -- or "grey" for you all in England. ;)

UPDATE: Not concerned with the bottom border of the table getting overwritten -- I'm hoping to eliminate on the sides where the border is gray.

Here is my code I'm working with and a jsfiddle.net page for your convience ;)

<table> <tr> <td>row1</td> </tr> <tr> <td>row2</td> </tr> <tr> <td>row3</td> </tr> <tr> <td>row4</td> </tr> </table>

table { border: 4px solid #000; width: 400px; } table tr { border-bottom: 4px solid #CCC; }

ptriek · Accepted Answer · 2011-12-30 18:00:42Z

Set border-collapse:separate to your table, and add the border to the td's instead of the tr's:

http://jsfiddle.net/ptriek/uJ5zN/2/

Telmo Marques · Accepted Answer · 2011-12-30 18:06:00Z

At this point, @ptriek's solution seems to be the one that better addresses your question but, just for reference, here's a workaround using a <div> to wrap things up. This solution also keeps the last <tr>'s boarder intact and might come in handy in other situations.

Fiddle: http://jsfiddle.net/uJ5zN/4/

HTML

<div class="wrapper"> <table> <tr> <td>row1</td> </tr> <tr> <td>row2</td> </tr> <tr> <td>row3</td> </tr> <tr> <td>row4</td> </tr> </table> </div>

CSS

.wrapper { border: 4px solid #000; width: 400px; } table { width: 400px; } table tr{ border-bottom: 4px solid #CCC; }

Alex P · Accepted Answer · 2011-12-30 19:05:39Z

One way would be to use the CSS last-child selector as follows:

table { border: 4px solid #000; width: 400px; } table tr { border-bottom: 4px solid #CCC; } table tr:last-child { border-bottom: 4px solid #000; }

Collectives™ on Stack Overflow

How can I make my border-bottom not overwrite my border for my table?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related