如何在colgroup上獲得輪廓邊框？

我有一個17列的表，分爲3個列組。我可以使用CSS設置背景顏色，這表明我的CSS選擇器很好。但是，我不能在每個羣組外部設置邊框。如何在colgroup上獲得輪廓邊框？

首先我想這個CSS：

colgroup.inbound, colgroup.outbound { 
    background-color: #eeeeee; 
    border: 1px solid red; 
}

而定義的列組是這樣的：

<colgroup span="2"></colgroup> 
<colgroup span="12" class="inbound"></colgroup> 
<colgroup span="3" class="outbound"></colgroup>

接下來我想這個CSS：

col.inbound, col.outbound { 
    background-color: #eeeeee; 
    border: 1px solid red; 
}

而定義的組這樣：

<colgroup 
    <col span="2"> 
    <col span="12" class="inbound"> 
    <col span="3" class="outbound">    
</colgroup>

在這兩種情況下，我的背景顏色生效，但不是我的邊框。我能看到的唯一邊界是所有單元格之間的細線（不是整個組）。

我知道表rules屬性，但我不想用這個。如果我可以研究如何使用它，我認爲CSS會給我更多的靈活性！

謝謝！

2013-02-26 Kim Prince

你能告訴我們整個表，還是jsfiddle.net上的例子？ – 2013-02-26 01:09:14

爲了使邊框使用表格時，應設置以下規則表

table.collapsed{ 
    border-collapse:collapse; 
}

的你會得到你的邊界，你假裝工作

enter image description here

col.inbound, col.outbound { 
    background-color: #eeeeee; 
    border: 1px solid red; 
}

這個簡單的例子JsBin

選項用於整個組，而不是每個

enter image description here

那麼你應該統治COLGROUP，而不是作爲的cols所以列的邊界..

colgroup.inbound { 
    border: 1px solid #ff0000; 
}

記得八方通使用border-collapse！這個可以看出JsBin

2013-02-26 02:05:05 Fico

我無法讓你的例子只爲外界工作。在colgroup上設置它會呈現完全相同的內容。我錯過了什麼？ – juancn 2013-12-09 18:45:10

您的解決方案將替換另一個問題：丟失圓桌角落。引用[6314667]（/ a/628358/6314667）：「border-radius」在「border-collapse」的值爲「collapse」時不適用於表元素。 – 7vujy0f0hy 2017-10-09 03:57:59

回答