How to apply table border to colgroup only?

Question

I have a HTML table that is made out of 2 colgroup s with each their own "children" columns.

How do I apply a border to the colgroup only?

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?

Answer 1

you should only select the colgroup instead col:

via 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

 #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

Instead of using border-left: 20px solid white; just use 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

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