How to apply table border to colgroup only?

Question

I have a HTML table that is made out of 2 colgroups 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>