77 lines
1.4 KiB
CSS
77 lines
1.4 KiB
CSS
@layer components {
|
|
table {
|
|
display: block; /* fixes scrolling when in a flexbox */
|
|
border-collapse: collapse;
|
|
|
|
thead {
|
|
border-color: var(--table-border);
|
|
border-width: var(--border-thin) var(--border-thin) 0 var(--border-thin);
|
|
|
|
& > tr {
|
|
border-color: var(--table-body-border);
|
|
|
|
& > :is(th, td) {
|
|
border-color: var(--table-body-border);
|
|
background-color: var(--table-thead);
|
|
}
|
|
}
|
|
|
|
& + tbody {
|
|
border-top-width: var(--border-thin);
|
|
}
|
|
}
|
|
tbody {
|
|
border-color: var(--table-body-border) var(--table-border);
|
|
border-left-width: var(--border-thin);
|
|
border-right-width: var(--border-thin);
|
|
border-bottom-width: 0;
|
|
|
|
& > tr {
|
|
border-color: var(--table-border);
|
|
|
|
& > :is(th, td) {
|
|
border-color: var(--table-border);
|
|
background-color: var(--table-tbody);
|
|
}
|
|
}
|
|
|
|
&:has(+ tfoot) {
|
|
border-bottom-width: var(--border-thin);
|
|
}
|
|
}
|
|
tfoot {
|
|
border-color: var(--table-border);
|
|
border-width: 0 var(--border-thin) var(--border-thin) var(--border-thin);
|
|
|
|
& > tr {
|
|
border-color: var(--table-body-border);
|
|
|
|
& > :is(th, td) {
|
|
border-color: var(--table-body-border);
|
|
background-color: var(--table-tfoot);
|
|
}
|
|
}
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
tr {
|
|
border-width: 0 0 var(--border-thin) 0;
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
th, td {
|
|
border-width: 0 var(--border-thin) 0 0;
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|