HTML – 如何在colgroup上获得轮廓边框?

前端之家收集整理的这篇文章主要介绍了HTML – 如何在colgroup上获得轮廓边框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含17列的表,分为3列组.我可以使用CSS设置背景颜色,这表明我的CSS选择器很好.但是,我无法在每个组的外部设置边框.

首先我尝试了这个CSS:

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

并以这种方式定义列组:

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

接下来我尝试了这个CSS:

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

并以这种方式定义组:

  1. <colgroup
  2. <col span="2">
  3. <col span="12" class="inbound">
  4. <col span="3" class="outbound">
  5. </colgroup>

在这两种情况下,我的背景颜色都会生效,但不会生效.我能看到的唯一边界是所有单元格之间的细白线(不是整个组周围).

我知道表规则属性,但我不想使用它.如果我能弄清楚如何使用它,我认为CSS会给我更大的灵活性!

解决方法

为了在使用表时使边框起作用,您应该将以下规则设置为表
  1. table.collapsed{
  2. border-collapse:collapse;
  3. }

当你假装的时候,你会得到你的边界

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

这个JsBin中的一个简单例子

选项
整个组的边框,而不是每个列的边框

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

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

记得总是使用边界崩溃!
这可以在JsBin看到

猜你在找的HTML相关文章