<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>