Border around tr element doesn't show?

Question

It seems like Chrome/Firefox do not render borders on tr , but it renders the border if the selector is table tr td .

How can I set a border on a tr?

My try, which doesn't work:

 table tr { border: 1px solid black; }

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

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

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

Answer 1

Add this to the stylesheet:

table {
  border-collapse: collapse;
}

JSFiddle .

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

There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated 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 collapse setting:

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.

Answer 2

Besides what top answer says, you should also make sure your border has visible style, for example:

border-style: solid;

if you are adding custom styles to some website.

Answer 3

It is possible to emulate border in table border collapse separate mode with css box-shadow:

table tr {
  box-shadow: 0 0 4px #ccc;
}