tr not displaying border-bottom

Question

I'm trying to create a datagrid and stumbled on two problems.

I had to use border-collapse: separate; to get round corners on top. But by doing that I lost the ability to add borders on tr botton.

Any insights?

http://fiddle.jshell.net/KNb7K/

css:

table.dgrid { border: solid 1px #CDCDCD; .border-radius(8px, 0px, 0px, 8px); width: 100%; border-collapse: separate; } table.dgrid th:first-child{ .border-radius(0px, 0px, 0px, 8px); } table.dgrid th:last-child{ .border-radius(8px, 0px, 0px, 0px); } table.dgrid th{ background-color: #E6E6E6; } table.dgrid tr th:last-child, table.dgrid tr td:last-child{ border-right: 0px; } table.dgrid tbody tr:last-child { border-bottom: 0; } table.dgrid tr { border-bottom: solid 1px #CDCDCD; border-collapse: collapse ; } table.dgrid th, table.dgrid td { padding: 5px; text-align: center; vertical-align: middle; border-right: solid 1px #CDCDCD; }

html:

<table class="dgrid"> <thead> <tr> <th>Ativar</th> <th>Imagem</th> <th>Posição</th> <th>Link</th> <th>Excluir</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td></td> <td></td> <td><input type="text" /></td> <td></td> </tr> <tr> <td><input type="checkbox" /></td> <td></td> <td></td> <td><input type="text" /></td> <td></td> </tr> <tr> <td><input type="checkbox" /></td> <td></td> <td></td> <td><input type="text" /></td> <td></td> </tr> </tbody> </table>

Apply your borders to the TD elements not the TR elements. That's pretty much the best way to go afaik and it's what I've always done. — Billy Moat
– Billy Moat, Commented Feb 7, 2013 at 15:03

Matthew Green · Accepted Answer · 2013-02-07 15:05:43Z

You can put the bottom-border on table.dgrid th, table.dgrid td and then I would update the table.dgrid tbody tr:last-child to have the td in there like so: table.dgrid tbody tr:last-child td.

Seimen · Accepted Answer · 2013-02-07 15:02:19Z

1

Remove border-collapse: separate; from table.dgrid.

answered Feb 7, 2013 at 15:02

Seimen

7,2942 gold badges30 silver badges42 bronze badges

Comments

w3jimmy · Accepted Answer · 2013-02-07 15:29:30Z

this works:

table.dgrid { width: 98%; border-collapse: separate; border-bottom: solid 1px #CDCDCD; margin:1%; } table.dgrid th:first-child{ border-top-left-radius: 8px; } table.dgrid th:first-child, table.dgrid td:first-child{ border-left: solid 1px #CDCDCD; } table.dgrid th:last-child{ border-top-right-radius: 8px; } table.dgrid th{ background-color: #E6E6E6; } table.dgrid tbody tr:last-child { border-bottom: 0; } table.dgrid th, table.dgrid td { padding: 5px; text-align: center; vertical-align: middle; border-top: solid 1px #CDCDCD; border-right: solid 1px #CDCDCD; }

basically do not use borders on tr elements, I modified the width and margins so that you can see clearer. Basically all td use borders top left and right, while the last bottom row is from the table itself

Collectives™ on Stack Overflow

tr not displaying border-bottom

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related