| <style> |
| div, td, th { |
| border-color: var(--border-color); |
| border-style: solid; |
| } |
| |
| div { |
| border-width: 1px; |
| max-height: 100%; |
| overflow: auto; |
| } |
| |
| table { |
| border-collapse: separate; |
| border-spacing: 0; |
| /* 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: var(--header-background); |
| position: sticky; |
| z-index: 1; |
| } |
| |
| thead { |
| top: 0; |
| } |
| |
| tbody > tr[aria-selected="false"]:hover { |
| background: var(--data-hover-background); |
| cursor: pointer; |
| } |
| |
| tbody > tr[aria-selected="true"] { |
| background: var(--data-selected-background); |
| } |
| |
| tfoot { |
| bottom: 0; |
| } |
| |
| tfoot th { |
| text-align: right; |
| } |
| |
| thead th { |
| border-width: 0 0 1px 0; |
| } |
| |
| td, tfoot th { |
| border-width: 1px 0 0 0; |
| } |
| |
| tbody > tr:first-child > td { |
| border-width: 0; |
| } |
| |
| td, th { |
| font-weight: normal; |
| padding-inline: var(--cell-padding); |
| text-align: left; |
| text-wrap: nowrap; |
| vertical-align: top; |
| } |
| |
| th[aria-sort] { |
| padding: 0; |
| } |
| |
| th[aria-sort] button { |
| align-items: start; |
| background: none; |
| border: none; |
| color: inherit; |
| cursor: pointer; |
| display: flex; |
| font: inherit; |
| height: 100%; |
| padding-inline: var(--cell-padding); |
| height: 100%; |
| text-align: left; |
| width: 100%; |
| } |
| |
| th[aria-sort] button:hover { |
| background: var(--header-hover-background); |
| } |
| |
| th[aria-sort] button::after { |
| margin-left: auto; |
| } |
| |
| 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: ' ❌'; |
| } |
| |
| td.number { |
| font-variant-numeric: tabular-nums; |
| text-align: right; |
| } |
| |
| pre { |
| margin: 0; |
| } |
| </style> |
| <div> |
| <table> |
| <thead> |
| <tr></tr> |
| </thead> |
| <tbody></tbody> |
| <tfoot> |
| <tr> |
| <th scope=row>Row Count</th> |
| <td>0</td> |
| </tr> |
| </tfoot> |
| </table> |
| </div> |