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

概述我有一个包含17列的表,分为3列组.我可以使用CSS设置背景颜色,这表明我的CSS选择器很好.但是,我无法在每个组的外部设置边框. 首先我尝试了这个CSS： colgroup.inbound, colgroup.outbound { background-color: #eeeeee; border: 1px solid red;} 并以这种方式定义列组： <colgroup s 我有一个包含17列的表,分为3列组.我可以使用CSS设置背景颜色,这表明我的css选择器很好.但是,我无法在每个组的外部设置边框.

首先我尝试了这个CSS：

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

并以这种方式定义列组：

<colgroup span="2"></colgroup><colgroup span="12" ></colgroup><colgroup span="3" ></colgroup>

接下来我尝试了这个CSS：

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

并以这种方式定义组：

<colgroup    <col span="2">    <col span="12" >    <col span="3" >            </colgroup>

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

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

解决方法 为了在使用表时使边框起作用,您应该将以下规则设置为表

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

总结

以上是内存溢出为你收集整理的HTML – 如何在colgroup上获得轮廓边框？全部内容，希望文章能够帮你解决HTML – 如何在colgroup上获得轮廓边框？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。