Does the border around the tr element not display?

Question

Chrome / Firefox doesn't seem to display borders on tr , but it displays the border if the table tr td selector.

How to set border to tr?

My attempt that does not work:

HTML

 <table> <tbody> <tr> <td> Text </td> </tr> </tbody> </table> 

CSS

 table tr { border:1px solid black; } 

http://jsfiddle.net/edi9999/VzPN2/

This is a similar question: Setting a border for the tr table works in everything except IE 6 and 7 , but it seems to work everywhere except IE.

Answer 1

Add this to your stylesheet:

 table { border-collapse: collapse; } 

JSFiddle .

The reason it behaves this way is actually pretty well described in the spec :

There are two different models for setting borders on table cells in CSS. One of them is most suitable for the so-called divided borders around individual cells, the other is suitable for borders that are continuous from one end of the table to the other.

... and later, for the collapse parameter:

In the shrinking border model, you can specify the borders that surround all or part of a cell, row, row group, column, and column group.

Answer 2

 <tr border="1"> 

or

 <table border="1"> 

must work.

If you want to do this with css, it might be better to do it with a class or

 <tr style="border 1px solid black">