| <style> |
| table { |
| border: 0; |
| border-collapse: collapse; |
| /* Per |
| * https://limebrains.com/blog/2021-03-02T13:00-heigh-100-inside-table-td |
| * this forces the header buttons to expand vertically, making them easier |
| * to click on. |
| */ |
| height: 1px; |
| width: 100%; |
| } |
| |
| thead, tfoot { |
| background: #bacbe6; |
| position: sticky; |
| } |
| |
| thead { |
| top: 0; |
| } |
| |
| tbody tr, tfoot tr { |
| border-top-color: rgba(0,0,0,.12); |
| border-top-style: solid; |
| border-top-width: 1px; |
| } |
| |
| tfoot { |
| bottom: 0; |
| font-weight: bold; |
| } |
| |
| td, th { |
| padding-inline: 16px; |
| } |
| |
| th[aria-sort] { |
| padding: 0; |
| } |
| |
| th[aria-sort] button { |
| background: none; |
| border: none; |
| color: inherit; |
| cursor: pointer; |
| font: inherit; |
| height: 100%; |
| padding-inline: 16px; |
| height: 100%; |
| width: 100%; |
| } |
| |
| th[aria-sort] button:hover { |
| background: rgba(0,0,0,.12); |
| } |
| |
| th[aria-sort='none'] button::after { |
| content: '⬍'; |
| } |
| |
| th[aria-sort='ascending'] button::after { |
| content: '⬆'; |
| } |
| |
| th[aria-sort='descending'] button::after { |
| content: '⬇'; |
| } |
| |
| ul, li { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .send-error::after { |
| content: ' ❌'; |
| } |
| |
| .number { |
| font-variant-numeric: tabular-nums; |
| text-align: right; |
| } |
| </style> |
| <table> |
| <thead> |
| <tr></tr> |
| </thead> |
| <tbody></tbody> |
| <tfoot> |
| <tr><td></td></tr> |
| </tfoot> |
| </table> |