单独给table的tr设置边框不显示?

有如下测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="button/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{margin:0px;padding:0px;}
        table{width:600px;/*border-collapse: collapse;*/}
        table tr{height: 32px;line-height: 32px;border-bottom:1px solid #333;}
    </style>

</head>
<body>

    <table >

        <tr>
            <td>11111111</td>
            <td>11111111</td>
            <td>11111111</td>
        </tr>

        <tr>
            <td>22222222</td>
            <td>22222222</td>
            <td>22222222</td>
        </tr>

        <tr>
            <td>33333333</td>
            <td>33333333</td>
            <td>33333333</td>
        </tr>

    </table>


</body>
</html>

当给 table 添加样式 border-collapse: collapse;时，下面的设置边框才有效果；如果去掉了这个属性，单独给 tr 设置 border-bottom 时，却没有效果。是怎么回事？

边框不折叠的表格行,列，行组和列组是不具有border的
参考http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders

【热门文章】