<!--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 mm (days)</th>
<th scope="col">Monthly mean wind speed at 10 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>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
* {
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;
}