CSS table sticky-left colgroup

Testing table horizontal scrolling with sticky-left column and some colgroup rows.

by medmunds

HTML

<table class="sticky-left">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Organic</th>
      <th>ISO Certified</th>
      <th>Lead Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" class="group">Northern and Western Regions</th>
    </tr>
    <tr>
      <td>Amalgamated Collections, Ltd.</td>
      <td>Yes</td>
      <td>No</td>
      <td>2-6 weeks</td>
    </tr>
    <tr>
      <td>Associated Affiliates, GmbH.</td>
      <td>Probably</td>
      <td>Yes</td>
      <td>3.5 days</td>
    </tr>
    <tr>
      <th colspan="4" class="group">Eastern, Southern, and Extraterrestrial Regions</th>
    </tr>
    <tr>
      <td>Unified Consolidators, Inc.</td>
      <td>No</td>
      <td>Additional cost</td>
      <td>4-7 hours</td>
    </tr>
    <tr>
      <td>Universal Omnipresence, LLC</td>
      <td colspan="2">By special arrangement</td>
      <td>14 months</td>
    </tr>
  </tbody>
</table>

CSS

table.sticky-left td:first-of-type,
table.sticky-left th:first-of-type {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  left: 0.5em;
  color: darkred;
}

table {
  min-width: 125%;
}
td, th {
  background: #f8f8f8;
  border: 1px solid #eee;
  padding: 0.25em 0.5em;
  text-align: left;
}