ColGroup Test

by Jayson Buquia

HTML

<table>
  <colgroup>
    <col span="2">
  </colgroup>
  <colgroup>
      <col span=1>
      <col span=2>
  </colgroup>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jace</td>
      <td>Buquia</td>
      <td>29</td>
      <td>M</td>
      <td>Gray</td>
    </tr>
    <tr>
      <td>Mary Grace</td>
      <td>Buquia</td>
      <td>30</td>
      <td>F</td>
      <td>Pink</td>
    </tr>
  </tbody>
</table>

SCSS

table {
  background-image: linear-gradient(to bottom, red, purple);
  margin-top: 20px;
}

th {
  border-top: 1px solid teal;
  padding: 5px 10px;
  position: relative;
  
  &::before {
    display: block;
    position: absolute;
    bottom: 100%;
    padding: 5px 0;
  }
  
  &:first-child {    
    &::before {
      content: 'Primary';
    }
  }
  
  &:nth-child(4) {
    &::before {
       content: 'Secondary';
    }
  }
}

colgroup {
  &:first-of-type {
  }
  
  &:nth-of-type(2) {
  }
}

tr {
  td {
    padding: 5px 10px;
  }
  
  th:not(:nth-child(3)),
  td:not(:nth-child(3)) {
     background-color: #fff;
  }
}