How do I put a border around a tr tag?

Question

I have a very simple html page:

<table>
     <tr><th>header1</th><th>header2</th></tr>
     <tr><td>item1</td><td>item2</td></tr>
     <tr><td>item3</td><td>item4</td></tr>
</table>

With some simple css:

tr {
    border:1px solid blue;
}

I would expect this to put a border around the trs but it doesn't put a border around it at all. How do I get a border around the tr?

Answer 1

Add table { border-collapse: collapse; }.

From the CSS2 specification:

In [the border-collapse: separate model], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

Answer 2

Your code works, if you want a border just on the row.

However, if you are looking to have the border everywhere, you will need to do this:

tr, td, th{
    border:1px solid blue;
}

Example: http://jsfiddle.net/jasongennaro/83VjH/