如何在colgroup上获得轮廓边框？

Question

我有一个包含17列的表，分为3列组。我可以使用CSS设置背景颜色，这表明我的CSS选择器很好。但是，我不能在每个组的外部设置边界。

首先我尝试了这个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会给我更大的灵活性！

Answer 1

为了在使用表格时使边框起作用，您应该将以下规则设置为表格

table.collapsed{
  border-collapse:collapse;
}

当你假装

时，你会得到你的边界

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

此JsBin

中的一个简单示例

方法 整个组的边框，而不是每个列的边框

然后你应该统治colgroup而不是cols ..

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

记住总是使用边框崩溃！ 这可以在JsBin

看到