<divclass="table-wrap"> <table> <caption>Assets</caption> <thead> <tr> <td></td> <th><spanclass="sr-only year">2019</span></th> <th><spanclass="sr-only year">2020</span></th> <thclass="current"><spanclass="sr-only year">2021</span></th> </tr> </thead> <tbody> <trclass="data"> <th>Cash <spanclass="description">This is the cash we currently have on hand.</span></th> <td>$25</td> <td>$30</td> <tdclass="current">$28</td> </tr> <trclass="data"> <th>Checking <spanclass="description">Our primary transactional account.</span></th> <td>$54</td> <td>$56</td> <tdclass="current">$53</td> </tr> <trclass="data"> <th>Savings <spanclass="description">Funds set aside for emergencies.</span></th> <td>$500</td> <td>$650</td> <tdclass="current">$728</td> </tr> <trclass="total"> <th>Total <spanclass="sr-only">Assets</span></th> <td>$579</td> <td>$736</td> <tdclass="current">$809</td> </tr> </tbody> </table> <!--同理多个<table></table>--> </div>
二、重点 CSS 代码
box-sizing 属性:
1 2 3 4 5 6 7
html { box-sizing: border-box; } body { font-family: sans-serif; color: #0a0a23; }
The span[class~="sr-only"] selector will select any span element whose classincludessr-only:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
span[class~="sr-only"] { border: 0!important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; -webkit-clip-path: inset(50%) !important; height: 1px!important ; width: 1px!important; position: absolute !important; overflow: hidden !important; white-space: nowrap !important; padding: 0!important; margin: -1px!important; } /* The CSS clip property is used to define the visible portions of an element. The clip-path property determines the shape the clip property should take. use the !important keyword to ensure these properties are always applied, regardless of order or specificity. */
The :first-of-type pseudo-selector is used to target the first element that matches the selector:
1 2 3 4 5 6 7
h1.flexspan:first-of-type { font-size: 0.7em; } /* The :last-of-type pseudo-selector does the exact opposite - it targets the last element that matches the selector. */ h1.flexspan:last-of-type { font-size: 1.2em; }
The key difference between tr[class="total"] and tr.total is that the first will select tr elements where the only class is total. The second will select tr elements where the class includes total: