使用CSS使表格的外邊框顏色與單元格的邊框顏色不同

Question

我想使用CSS設置表格的外邊框的顏色... 然後，內部單元格將具有不同的邊框顏色...

我創造了這樣的事情：

table { 
    border-collapse:collapse; 
    border: 1px solid black; 
} 

table td { 
    border: 1px solid red; 
} 

問題是，該表的顏色變化，成爲紅的，你可以在這裏看到：http://jsfiddle.net/JaF5h/

如果表格的邊框寬度增加至2px的它將工作：http://jsfiddle.net/rYCrp/

我一直在處理CSS和跨瀏覽器問題這麼久......這是我第一次遇到類似的東西，我完全卡住......不知道該怎麼做！

任何人都知道如何使用border-width獲得固定值：1px？

Answer 1

我會通過使用相鄰的選擇，像這樣達致這：

table { 
    border: 1px solid #000; 
} 

tr { 
    border-top: 1px solid #000; 
} 

tr + tr { 
    border-top: 1px solid red; 
} 

td { 
    border-left: 1px solid #000; 
} 

td + td { 
    border-left: 1px solid red; 
} 

這是一個有點重複，但它acheives你後通過設置效果第一行和第一列的頂部和左邊界，然後用紅色覆蓋「內部」行和單元格。

這當然不會在IE6中工作，因爲它不理解相鄰的選擇器。

http://jsfiddle.net/JaF5h/36/

Answer 2

嘗試它爲我工作如下：

table { 
    border-collapse: collapse; 
    border: solid #000; 
} 

table td { 
    border: 1px solid red; 
} 

Answer 3

我離開了一些重要的東西。 jsFiddle使用重置表「標準化」CSS。如果您取消選中左側的「normalize css」複選框，您將會看到黑色邊框。不過，如果沒有重置樣式表，將會有一些額外的填充移除。

Answer 4

試試這個：

tbody { display:block; margin: -1px; } 

Answer 5

圍繞創建您的表覈實。設置表格外部的div邊框顏色。不要邊框摺疊你的桌子。相反，讓您的單元格分開顯示下方div的（內邊框）背景顏色。然後將背景單元格設置爲您選擇的背景顏色。

HTML：

<div id="tableDiv"> 
    <table id="studentInformationTable"> 
     <!-- Add your rows, headers, and cells here --> 
    </table> 
</div> 

CSS：

#tableDiv { 
    margin-left: 40px; 
    margin-right: 40px; 
    border: 2px solid brown; 
    background-color: white; 
} 

table { 
    position: relative; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    border-color: brown; 
} 

td, th { 
    background-color: #e7e1d3; 
    padding: 10px 25px 10px 25px; 
    margin: 0px; 
} 

Answer 6

以前的答案並沒有完全解決這對我來說。接受的答案允許內部邊框與外部邊框重疊。經過一番實驗後，我想出了以下解決方案。

通過設置表格摺疊樣式來分隔內部邊框不會與外部重疊。從那裏，額外和加倍的邊界被消除。

HTML：

<table> 
<tr> 
    <td>Content</td> 
    <td>Content</td> 
    <td>Content</td> 
</tr> 
<tr> 
    <td>Content</td> 
    <td>Content</td> 
    <td>Content</td> 
</tr> 
<tr> 
    <td>Content</td> 
    <td>Content</td> 
    <td>Content</td> 
</tr> 

CSS

table { 
    border: 1px solid black; 
    border-collapse: separate; 
    border-spacing: 0; 
} 
table td, table th { 
    border: 1px solid red; 
} 

table tr td { 
    border-right: 0; 
} 
table tr:last-child td { 
    border-bottom: 0; 
} 
table tr td:first-child, 
table tr th:first-child { 
    border-left: 0; 
} 
table tr td{ 
    border-top: 0; 
} 

https://jsfiddle.net/o5ar81xg/