<!--Source: https://www.metoffice.gov.uk/research/climate/maps-and-data/uk-climate-averages/gcnk62de6-->
<div class="wrapper" tabindex="0" role="region" aria-labelledby="tableCaption_01">
  <table class="simple">
    <caption id="tableCaption_01">Average climate data for the UK, 1990–2020</caption>
    <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Maximum temperature (°C)</th>
        <th scope="col">Minimum temperature (°C)</th>
        <th scope="col">Days of air frost (days)</th>
        <th scope="col">Sunshine (hours)</th>
        <th scope="col">Rainfall (mm)</th>
        <th scope="col">Days of rainfall ≥1&nbsp;mm (days)</th>
        <th scope="col">Monthly mean wind speed at 10&nbsp;m (knots)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">January</th>
        <td>6.66</td>
        <td>1.21</td>
        <td>11.32</td>
        <td>47.51</td>
        <td>121.53</td>
        <td>15.43</td>
        <td>10.77</td>
      </tr>
      <tr>
        <th scope="row">February</th>
        <td>7.16</td>
        <td>1.13</td>
        <td>10.69</td>
        <td>71.93</td>
        <td>96.15</td>
        <td>13.18</td>
        <td>10.77</td>
      </tr>
      <tr>
        <th scope="row">March</th>
        <td>9.22</td>
        <td>2.19</td>
        <td>7.84</td>
        <td>109.24</td>
        <td>85.10</td>
        <td>12.68</td>
        <td>10.28</td>
      </tr>
      <tr>
        <th scope="row">April</th>
        <td>12.03</td>
        <td>3.75</td>
        <td>4.03</td>
        <td>155.38</td>
        <td>71.73</td>
        <td>11.59</td>
        <td>9.33</td>
      </tr>
      <tr>
        <th scope="row">May</th>
        <td>15.13</td>
        <td>6.25</td>
        <td>1.20</td>
        <td>192.21</td>
        <td>70.98</td>
        <td>11.24</td>
        <td>8.75</td>
      </tr>
      <tr>
        <th scope="row">June</th>
        <td>17.68</td>
        <td>9.08</td>
        <td>0.07</td>
        <td>171.48</td>
        <td>77.20</td>
        <td>11.51</td>
        <td>8.16</td>
      </tr>
      <tr>
        <th scope="row">July</th>
        <td>19.62</td>
        <td>11.02</td>
        <td>0.00</td>
        <td>173.39</td>
        <td>82.48</td>
        <td>12.25</td>
        <td>7.85</td>
      </tr>
      <tr>
        <th scope="row">August</th>
        <td>19.30</td>
        <td>10.97</td>
        <td>0.01</td>
        <td>161.64</td>
        <td>93.73</td>
        <td>12.89</td>
        <td>7.88</td>
      </tr>
      <tr>
        <th scope="row">September</th>
        <td>16.85</td>
        <td>9.04</td>
        <td>0.12</td>
        <td>127.49</td>
        <td>90.89</td>
        <td>12.08</td>
        <td>8.41</td>
      </tr>
      <tr>
        <th scope="row">October</th>
        <td>13.08</td>
        <td>6.42</td>
        <td>1.64</td>
        <td>91.82</td>
        <td>122.56</td>
        <td>14.83</td>
        <td>9.30</td>
      </tr>
      <tr>
        <th scope="row">November</th>
        <td>9.41</td>
        <td>3.56</td>
        <td>5.51</td>
        <td>57.94</td>
        <td>123.39</td>
        <td>15.81</td>
        <td>9.74</td>
      </tr>
      <tr>
        <th scope="row">December</th>
        <td>7.02</td>
        <td>1.42</td>
        <td>10.95</td>
        <td>42.71</td>
        <td>127.19</td>
        <td>15.60</td>
        <td>10.06</td>
      </tr>
    </tbody>
    <tfoot>
      <th scope="row">Annual</th>
      <td>12.79</td>
      <td>5.53</td>
      <td>53.36</td>
      <td>1402.73</td>
      <td>1162.93</td>
      <td>159.08</td>
      <td>9.27</td>
    </tfoot>
  </table>
</div>
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
}

.wrapper {
  overflow: scroll;
}

table {
  border-collapse: collapse;
  width: max(65rem, 100%);
  table-layout: fixed;
}

th,
caption {
  text-align: start;
}

caption {
  margin-block: 0.75rem;
}

thead th:not(:first-child),
td {
  text-align: end;
}

thead {
  border-block-end: 2px solid;
  background: whitesmoke;
}

tfoot {
  border-block: 2px solid;
  background: whitesmoke;
}

th,
td {
  border: 1px solid lightgrey;
  padding: 0.25rem 0.75rem;
  vertical-align: baseline;
}

th:first-child {
  position: sticky;
  inset-inline-start: 0;
  border-inline-end: none;
}

tbody th {
  background: white;
}

thead th,
tfoot th {
  background: whitesmoke;
}

thead th {
  vertical-align: bottom;
}

td:first-of-type,
:where(thead, tfoot) th:nth-child(2) {
  border-inline-start: none;
}

th:first-of-type {
  width: 10rem;
}

th:first-child::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 1px;
  height: 100%;
  background: lightgrey;
}

/* For the shadow: https://adrianroselli.com/2020/01/fixed-table-headers.html */
div[tabindex="0"][aria-labelledby][role="region"] {
  background: linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.