Unable to select <TR>

I want to use css to change the property of the <tr> contents, like give it a red border. However doing the below code doesnt work on <tr>, but works on <td>. Did something go wrong?

CSS:

#leaderboard tr {
border: 1px red solid;
}

.leaderboard {
border: 1px red solid;
}

HTML:

<table id="leaderboard">
    <tr class="leaderboard"><td>Hello</td></tr>
    <tr class="leaderboard"><td>There!</td></tr>
</开发者_Python百科table>

Imho you can't give the tr border properties because only the individual cells have borders (in IE). So the most simple solution would be to give the table left and right border and the cells top and bottom ones.

#leaderboard {
    border: 1px red solid;
}

#leaderboard td {
    border-top: 1px red solid;
    border-bottom: 1px red solid;
}

Works fine in Chrome and Firefox. Are you using a modern, standards-compliant browser?

This works in IE8, FF5.

<style type="text/css">
.td{
    border:1px solid red;
    border-top:0;
    height:28px;
   }
</style>

<table width="300px" style="border-top:1px solid red;border-right:1px solid red;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="td" style="width:50px;">head1</td>                           
        <td class="td" style="width:50px;">head2</td>
    </tr>        
    <tr>
        <td class="td">cell1</td>                              
        <td class="td">cell2</td>
    </tr>
</table>

To my understanding, TR doesn't take up layout space the way other elements might. You'd be well advised to trade your tables/tr/td structure with nested, classed DIVs, like so:

<div id='leaderboard'>
    <div class='leaderboard'>Hello</div>
    <div class='leaderboard'>There</div>
</div>

There's nothing that you can do with tables that you can't do with divs, but conversely there's a lot divs CAN do that tables can't.