Why don't the border's appear in the rows of the table?

There are two different models for the tables: ( separate and collapse ). They are used to set border behavior in table cells in CSS.

The default is separate :

 table { border-collapse: separate; } 

In this model, the <tr> has no boundaries and will be ignored by browsers. The solution for this table model is to use styles for the <td> and <th> tags that will be inside the <tr> .

  <tr> <th>lorem</th> <td>lorem</td> </tr> 

You can also set the table behavior in a collapse :

 table { border-collapse: collapse; } 

This will allow you to style the <tr> as you like.

This question has already been raised here on stackoverflow.

Below is your code performed by each of the table behavior patterns:

 table, td, th { border: 2px solid red; } #table-separate { border-collapse: separate; } #table-collapse { border-collapse: collapse; } 

 <h3>table-collapse</h3> <table id=table-collapse> <tr> <th rowspan='3'>lorem</th> <th>lorem</th> </tr> <tr> <th>lorem</th> </tr> <tr> <th>lorem</th> </tr> </table> <h3>table-separate</h3> <table id=table-separate> <tr> <th rowspan='3'>lorem</th> <th>lorem</th> </tr> <tr> <th>lorem</th> </tr> <tr> <th>lorem</th> </tr> </table>