Table with colored left column

[mhulse]

th[scope=row] {
    background-image: linear-gradient(
        rgba(19, 141, 156, 0.2),
        rgba(19, 141, 156, 0.2)
    )
}

<table summary="Provide a more detailed description of the table than is suitable for the caption element.">
  <caption>The quick brown fox hxy jumps over the lazy dog hxy.</caption>
  <thead>
    <tr>
      <th scope="col">Lorem</th>
      <th scope="col">Ipsum</th>
      <th scope="col">Dolor</th>
      <th scope="col">Sit</th>
      <th scope="col">Amet</th>
      <th scope="col">Consectetur</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope="col" colspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope="row">Lorem ipsum</th>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td>Bar</td>
      <td>Foo</td>
    </tr>
    <tr>
      <th scope="row">Lorem ipsum</th>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td>Bar</td>
      <td>Foo</td>
    </tr>
    <tr>
      <th scope="col" colspan="6">Lorem ipsum dolor sit amet.</th>
    </tr>
    <tr>
      <th scope="row">Lorem ipsum</th>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td>Bar</td>
      <td>Foo</td>
    </tr>
    <tr>
      <th scope="row">Lorem ipsum</th>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td>Bar</td>
      <td>Foo</td>
    </tr>
    <tr>
      <th scope="row">Lorem ipsum</th>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td>Bar</td>
      <td>Foo</td>
    </tr>
    <tr>
      <th scope="col" colspan="6">Lorem ipsum dolor sit amet.</th>
    </tr>
    <tr>
      <th scope="row">Lorem ipsum</th>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td>Bar</td>
      <td>Foo</td>
    </tr>
  </tbody>
</table>