具有圓角1px邊框的邊框間距

我找不到匹配的答案。具有圓角1px邊框的邊框間距

<table class="table1"> 
<tr> 
    <td class="red header" colspan="4"> 
     Table1 header</td> 
</tr> 
... 
<tr> 
    <td class="red footer" colspan="4">Footer</td> 
</tr>

<table class="table2"> 
<tr> 
    <td class="red header" colspan="4"> 
     Table2 header</td> 
</tr> 
... 
<tr> 
    <td class="red footer" colspan="4">Footer</td> 
</tr>

table { 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
border: 1px solid #000; 
} 

.table1 { 
border-spacing: 0; 
} 

.table2 { 
border-collapse: collapse; 
} 

.footer { 
-moz-border-bottom-right-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
border-bottom-right-radius: 5px; 
-moz-border-bottom-left-radius: 5px; 
-webkit-border-bottom-left-radius: 5px; 
border-bottom-left-radius: 5px; 
} 

.header { 
-moz-border-top-right-radius: 5px; 
-webkit-border-top-right-radius: 5px; 
border-bottom-top-radius: 5px; 
-moz-border-top-left-radius: 5px; 
-webkit-border-top-left-radius: 5px; 
border-top-left-radius: 5px; 
text-align: center; 
} 

td { 
border: 1px solid #000; 
}

http://jsfiddle.net/uXUnm/

正如你所看到的，table1有2px的邊框（我想1px的），table2沒有圓角邊框。 border-collapse:collapse;修復了由border-spacing: 0;引起的第一個問題，但打破了圓角。任何人都可以告訴我一種方法來解決這兩個問題，而不會搞亂:first-child，last-child等選擇器？

來源

2013-04-14 Destroy666

順便說一句，這不是你如何做表頭或頁腳。有'thead'，'tfoot'，'tbody'，'caption'和'th'等元素具有語義意義，應該用在平淡無奇的td上。 – cimmanon

我正在爲MyBB做它，它只使用默認外觀中的thead和tbody，即使在所有表格中都不使用。需要一段時間才能將所有內容轉換爲這些內容所以我希望有一個最終的CSS或JS解決方案。 – Destroy666

這裏是我固定的CSS：

table { 
    border:1px solid black; 
    border-radius: 5px; 
    border-spacing: 0; 
} 
table td:first-child, table td:not(:first-child):not(:last-child){ 
    border-right:1px solid black; 
} 
table tr:first-child td, table tr:not(:last-child) td { 
    border-bottom:1px solid black; 
} 

table thead tr:first-child td:first-child { 
    -webkit-border-top-left-radius: 2px; 
    -moz-border-radius-topleft: 2px; 
    border-top-left-radius: 2px; 
} 

table thead tr:first-child td:last-child { 
    -webkit-border-top-right-radius:2px; 
    -moz-border-radius-topright: 2px; 
    border-top-right-radius: 2px; 
} 
table tbody tr:last-child td:first-child { 
    -webkit-border-bottom-left-radius: 2px; 
    -moz-border-radius-bottomleft: 2px; 
    border-bottom-left-radius: 2px; 
} 

table tbody tr:last-child td:last-child { 
    -webkit-border-bottom-right-radius: 2px; 
    -moz-border-radius-bottomright: 2px; 
    border-bottom-right-radius: 2px; 
}

可以設置邊界半徑：5像素;任何價值，它會完美的工作！

來源

2013-05-02 13:57:52 ovnia

具有圓角1px邊框的邊框間距

回答

相關問題