如何在tr標籤周圍添加邊框？

我有一個非常簡單的HTML頁面：如何在tr標籤周圍添加邊框？

<table> 
    <tr><th>header1</th><th>header2</th></tr> 
    <tr><td>item1</td><td>item2</td></tr> 
    <tr><td>item3</td><td>item4</td></tr> 
</table>

通過一些簡單的CSS：

tr { 
    border:1px solid blue; 
}

我希望它可以把周圍的邊框tr秒，但它並沒有把邊框它根本就沒有。我如何獲得圍繞tr的邊框？

來源

2011-10-05 Mykroft

[it does not（http://jsfiddle.net/keTPJ/）？ –

你使用什麼瀏覽器？這應該工作得很好。 – Brad

哦，我明白了......這個奇怪的現象發生在IE7 ......或怪癖模式......這是有道理的。 –

添加table { border-collapse: collapse; }。

從the CSS2 specification：

在[該border-collapse: separate模型]，每個小區具有一個單獨的邊框。 [...]行，列，行組和列組不能有邊框（即用戶代理必須忽略這些元素的邊框屬性）。

來源

2011-10-05 01:45:07

如果您想在該行上輸入border，那麼您的代碼可以正常工作。

但是，如果你正在尋找有border無處不在，你需要這樣做：

tr, td, th{ 
    border:1px solid blue; 
}

例子：http://jsfiddle.net/jasongennaro/83VjH/

來源

2011-10-05 01:50:24

邊框可以通過添加邊框被添加到錶行<td> and <th> elements [這基本上是一個CSS技巧來實現（hack！），因爲邊界不能被添加到<tr>和<tbody>表格元素]。將以下樣式添加到CSS中以獲取圍繞行或標題或表格單元格的邊框。

table { 
    border-collapse: collapse; 
} 
table td, table th { 
    border: solid white; 
} 
td { 
    border-color: red (just an example, can be as per your requirement); 
}

說明：

邊界崩潰規則添加到整個表。它可以有兩個其他可能的屬性（默認）和繼承。爲他們各自的效果參考https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
第二規則即加入邊界屬性<TD>（用於數據單元）和第< >（對於標題單元）是必須的。如果你不添加它，邊框將不會顯示出來。在這個規則中，邊界顏色是白色的，它可以是你選擇的其他顏色而不是白色。基本上，這條規則將激活表格單元格周圍的邊界，並且由於顏色是白色，所以不會顯示任何內容。
最後，添加您選擇的顏色。此規則可以更具體地將邊界應用於一個<td>或一類<td>。

來源

2016-09-21 00:52:43

如何在tr標籤周圍添加邊框？

回答

相關問題