我如何在我的桌子和border-collapse上使用圓角邊框：摺疊？

我有以下幾點：我如何在我的桌子和border-collapse上使用圓角邊框：摺疊？

<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;"> 
    <THEAD> 
    <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
    </TR> 
    </THEAD> 
    <TBODY> 
    <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
    </TR> 
    <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
    </TR> 
    <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
    </TR> 
    </TBODY> 
</TABLE>

Example

我想有圓角邊框，細胞之間沒有空格也有我的表中的不同顏色的頭球頂區域。但它似乎並不奏效。

我創造了這個小提琴。當我註釋掉border-collapse時，我得到的是圓角，但是單元格之間有空格。當它在我沒有邊界半徑和細胞之間沒有空間。

更新：

這裏似乎是完美的解決方案：Fiddle

來源

2012-01-17 Samantha J T Star

你看過這個：http://stackoverflow.com/questions/4932181/rounded-table-corners-css-only。那邊還有一個小提琴，它似乎在做你所要求的。 – PhillipKregg 2012-01-17 04:21:12

最接近我找到解決方案是：http://jsfiddle.net/JWb4T/1/ – 2012-01-17 05:37:09

你的桌子上標籤添加border-spacing:0代替border-collapse:collapse修復它：

jsFiddle Demo

來源

2012-01-17 04:26:51 SpoonNZ

這幾乎修復它，但仍然有一些泄漏的顏色，如果你仔細看:-( – 2012-01-17 05:36:05

呃，對，你是。我想我已經運用了bf顏色到TH不TR，並給他們一個邊界半徑。幾個'tr：first-child th：first-child：border-radius：5px 0 0 0;'style rules應該有幫助，但是我覺得有效 – SpoonNZ 2012-01-17 08:04:18

哦，給元素半徑和背景是什麼？會做一個小提琴，但iPad不利於編碼... – SpoonNZ 2012-01-17 08:06:11

下面是使用包裝的例子div：

<div style="display: table; 
      padding: 2px; 
      border-radius: 5px; 
      border: 1px solid #999;"> 
    <TABLE style="border-collapse: collapse;"> 
    <THEAD> 
     <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
     </TR> 
    </THEAD> 
    <TBODY> 
     <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
     </TR> 
     <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
     </TR> 
     <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
     </TR> 
    </TBODY> 
    </TABLE> 
</div>

你可以看到它在這裏工作：jsFiddle

注：display:table;不支持IE7和更早版本。 IE8在文檔中需要：!DOCTYPE。所有現代瀏覽器（包括IE9）都支持它，所以它不應該是一個問題。

來源

2012-01-17 04:31:18 vdbuilder

我如何在我的桌子和border-collapse上使用圓角邊框：摺疊？

回答

相關問題