Question

我想使用css来更改<tr>内容的属性，比如给它一个红色边框。但是，执行以下代码对<tr>无效，但适用于<td>。出了什么问题？

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>
</table>

Answer 1

Imho你不能给tr边界属性，因为只有单个单元格有边框（在IE中）。因此，最简单的解决方案是给表左右边框以及单元格顶部和底部。

#leaderboard {
    border: 1px red solid;
}

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

Answer 2

Chrome和Firefox中的

Works fine。您使用的是符合标准的现代浏览器吗？

Answer 3

这适用于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>

Answer 4

据我了解，TR不像其他元素那样占用布局空间。建议您将表/ tr / td结构与嵌套的分类DIV进行交易，如下所示：

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

对于div s无法处理的表格，您无法做任何事情，但相反，div的{{1}}不能执行table次CAN。< / p>

无法选择

4 个答案: