CSS table sticky-left colgroup 2

Using <p> inside 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">
        <p>Northern and Western Regions</p>
      </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">
        <p>Eastern, Southern, and Extraterrestrial Regions</p>
      </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:not([colspan]),
table.sticky-left th:first-of-type:not([colspan]) {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  left: 0.5em;
  color: darkred;
}
table.sticky-left th[colspan] p {
  display: inline-block;
  position: sticky;
  left: 0.5em;
  outline: 1px solid darkblue;
}


table {
  min-width: 125%;
}

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