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).