表格邊框寬度和顏色的相互影響

我正在使用border-right向我的標題單元格添加一些填充。（我使用border-right而不是padding的原因是因爲實際上我想要移動背景上的圖像）。表格邊框寬度和顏色的相互影響

table { 
 
    border: solid 2px red; 
 
} 
 

 
th { 
 
    background-color: #ccc; 
 
    border-right: 25px solid transparent; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
th:after { 
 
content: "x"; 
 
color: red; 
 
} 
 

 
td:before { 
 
content: "cell" 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
    <th> foo</th> 
 
    <th> bar </th> 
 
    <th> bizz</th> 
 
    
 
    <tr> 
 
    </thead> 
 
    
 
    <tr> 
 
    <td/><td/><td/> 
 
    </tr> 
 
</table>

你可以看到還有的border-bottom和border-right之間有趣的交互。有沒有辦法來解決這個問題？

來源

2017-03-10 dwjohnston

對於顏色，你可以使用rgba（255,255,255,2）來獲得背景白色，但它仍然會將下邊框連接到右邊框（下邊框線），填充是解決方案！ – Ishu

發生這種情況的原因是底部邊框試圖與右邊框連接，而右邊框的底部不是真的仍然是底部邊框。也許你可以使用填充結合相應的background-clip屬性。

來源

2017-03-10 04:11:47 Julien

表格邊框寬度和顏色的相互影響

回答

相關問題