如何仅将表格边框应用于 colgroup？

Question

我有一个 HTML 表，它由 2 个colgroup组成，每个都有自己的“子”列。

如何仅对colgroup应用边框？

这是我尝试过的

 #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>

这是我正在寻找的结果

如您所见，绿色边框也应用于各个单元格，我该如何解决？

Answer 1

你应该只 select colgroup 而不是 col：

通过 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>

或将 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>

Answer 2

而不是使用border-left: 20px solid white; 只需使用border-left: 20px solid red; 并使第一个的边界右绿色只需使用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>