html - 如何在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 会给我更多的灵 active ，如果我能弄清楚如何使用它的话!

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 看到