無法選擇<TR>

我想使用css來更改<tr>內容的屬性，如給它一個紅色的邊框。但是，執行下面的代碼在<tr>上不起作用，但在<td>上工作。出了什麼問題？無法選擇<TR>

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>

來源

2011-07-14 Nyxynyxx

邊框通常不在IE的tr中受到尊重。 – scrappedcola

這必須是IE問題。您在Firefox上爲我工作的代碼：http://jsfiddle.net/hkCxc/ –

恕我直言，因爲只有個別細胞有邊界（在IE），你不能給TR邊框屬性。所以最簡單的解決方案是將左右邊框和單元格放在頂部和底部。

#leaderboard { 
    border: 1px red solid; 
} 

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

來源

2011-07-14 19:49:14 marc

替代方法是將表格本身左右分開，您也可以在第一個和最後一個單元格上放置一個類，並將適當的邊框應用於他們。 – scrappedcola

Works fine在Chrome和Firefox中。您是否使用符合標準的現代瀏覽器？

來源

2011-07-14 19:49:38

這在評論中非常概括。 – BoltClock

我正在使用Chrome的最新穩定版... – Nyxynyxx

-1

據我瞭解，TR不會像其他元素一樣佔用佈局空間。你會得到很好的建議與嵌套，歸類的DIV交易你的表/ TR/TD結構，像這樣：

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

沒有什麼，你可以使用表，你不能用div就做這樣做，但相反，有很多div s可以做到table s不能。

來源

2011-07-14 19:49:42

排行榜*畢竟是*表。 – BoltClock

@boltclock，是的 - 但他們不特別*好*是麻煩。 –

-1我不確定我是否理解「表格良好」的含義，但有些表格最適合使用，比如包含名稱，分數和日期的排行榜。 – xec

這適用於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>

來源

2011-07-14 21:16:03 kheya

回答

相關問題