[英]How to apply table border to colgroup only?
I have a HTML table that is made out of 2 colgroup
s with each their own "children" columns.我有一个 HTML 表,它由 2 个colgroup
组成,每个都有自己的“子”列。
How do I apply a border to the colgroup
only?如何仅对colgroup
应用边框?
Here what I've tried这是我尝试过的
#table { border-collapse: collapse; } #tableCol1 { border-left: 20px solid green; background-color: red; }
<table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup> <col span="3" class="tableColGroup" id="tableCol1"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>
This is the result I am looking for这是我正在寻找的结果
As you can see the green border is also applied to the individual cells, how do I solve this?如您所见,绿色边框也应用于各个单元格,我该如何解决?
you should only select the colgroup instead col:你应该只 select colgroup 而不是 col:
via nth-child()通过 nth-child()
#table { border-collapse: collapse; } colgroup:nth-child(2) {/*colgroup:nth-child(even) works also and can alternate if you have 4 and more colgroups*/ border-left: 20px solid green; background-color: red; }
<table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup> <col span="3" class="tableColGroup" id="tableCol1"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>
or moving ID to the parent或将 ID 移至父级
#table { border-collapse: collapse; } #tableCol1 { border-left: 20px solid green; background-color: red; }
<table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup id="tableCol1"> <col span="3" class="tableColGroup"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>
Instead of using border-left: 20px solid white;
而不是使用border-left: 20px solid white;
just use border-left: 20px solid red;
只需使用border-left: 20px solid red;
and to make the first's border-right green just use nth-of-type
to target the first child of every tr
like the following in my example并使第一个的边界右绿色只需使用nth-of-type
来定位每个tr
的第一个孩子,如下面的例子
#table { border-collapse: collapse; } #tableCol1 { border-left: 20px solid red; background-color: red; } tr th:nth-of-type(1){ border-right: 20px solid green; }
<table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup> <col span="3" class="tableColGroup" id="tableCol1"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.