我的TR邊框覆蓋表格邊框

我已經爲我的桌子下面的CSS：我的TR邊框覆蓋表格邊框

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

tr{ 
    border-bottom: 1px solid #a2a2a2; 
    }

我希望我的表有一個黑色的邊框和內部線路都應該通過灰色邊框隔開。然而，表格的底部邊框被tr覆蓋，並且是灰色而不是黑色。

我如何設法優先考慮tr邊界的表格邊界？

來源

2013-06-13 Syl

移動你的下邊框頂端爲tr，和將第一個tr設置爲無邊框：

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

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

tr:first-child{ 
    border:none; 
}

jsFiddle to demonstrate it working（略有修改邊框的顏色和大小，以幫助他們在演示中更好地顯示出來）

請注意，此解決方案包括於其他有效的解決方案稍微CSS代碼，但具有更好的瀏覽器兼容的優點。（:first-child是CSS2，而:last-child是CSS3）

[編輯]

按如下OP的評論：爲防止單元格邊框出血到表格邊框，我們需要做到以下幾點：

刪除border-collapse:collapse。這就是使邊界結合在一起造成出血效應的原因。
將內邊框放在單元格上（td）而不是行（tr）。這是必要的，因爲如果沒有border-collapse，我們不能在tr上有邊界。
將border-spacing:0加到表中。這關閉了td元素之間的差距，因爲邊界位於它們上方，而不是tr，因此現在顯示出來。

這裏的成品代碼：

table{ 
    border: 4px solid blue; 
    border-spacing:0; 
} 

td{ 
    border-top: 4px solid red; 
} 

tr:first-child>td{ 
    border:none; 
}

，這裏是小提琴的更新版本：http://jsfiddle.net/T5TGN/2/

來源

2013-06-13 10:24:25 Spudley

我想沒有辦法阻止紅色在藍色之上（在你的jsFiddle中）。 – Syl

@Sylario - 是的，我會更新答案... – Spudley

哇，你知道你的CSS。謝謝！瘋狂如何看起來容易需要一些技巧。 – Syl

使用:not(:last-child)

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

tr:not(:last-child){ 
border-bottom: 1px solid #a2a2a2; 
}

請看到這一點：http://jsfiddle.net/JSWorld/QmuA9/1/

來源

2013-06-13 10:23:20

+1正確。但請注意，這在舊版瀏覽器中不起作用（在IE8中不支持'：not'和'：last-child'，並且其他舊瀏覽器中缺少'：not'） – Spudley

嘗試添加填充，底部到TR：

tr{ 
    border-bottom: 1px solid #a2a2a2; 
    padding-bottom: 1px; 
    }

來源

2013-06-13 10:23:26 DaftDev

更新表CSS像下面

table, tr:last-child 
{ 
    border: 1px solid black; 
    border-collapse: collapse; 
}

您可以檢查Demo

來源

2013-06-13 10:48:58 spring

我的TR邊框覆蓋表格邊框

回答

相關問題