87 lines
1.3 KiB
CSS
87 lines
1.3 KiB
CSS
table {
|
|
border: 0;
|
|
inline-size: 100%;
|
|
}
|
|
table br {
|
|
display: none;
|
|
}
|
|
|
|
thead {
|
|
border: none;
|
|
clip: rect(0 0 0 0);
|
|
block-size: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
inline-size: 1px;
|
|
}
|
|
|
|
tr {
|
|
border: 1px solid var(--color-text);
|
|
display: block;
|
|
margin-block-end: var(--space-s);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: var(--space-xs) var(--space-s);
|
|
vertical-align: sub;
|
|
}
|
|
|
|
td {
|
|
border-block-end: 1px solid var(--color-text);
|
|
display: block;
|
|
text-align: start;
|
|
}
|
|
td::before {
|
|
content: attr(data-label);
|
|
float: start;
|
|
font-weight: var(--font-bold);
|
|
}
|
|
td:last-child {
|
|
border-block-end: 0;
|
|
}
|
|
|
|
@media screen(sm) {
|
|
table {
|
|
border-collapse: collapse;
|
|
margin: 0;
|
|
padding: 0;
|
|
table-layout: fixed;
|
|
}
|
|
table br {
|
|
display: block;
|
|
}
|
|
thead {
|
|
position: static;
|
|
text-align: start;
|
|
display: table-header-group;
|
|
}
|
|
caption {
|
|
margin: var(--space-xs) 0 var(--space-s);
|
|
}
|
|
tr {
|
|
border: 0;
|
|
padding: var(--space-xs);
|
|
margin: 0;
|
|
display: table-row;
|
|
}
|
|
|
|
tr:not(:last-child) {
|
|
border-block-end: 1px solid var(--color-bg-accent);
|
|
}
|
|
|
|
td {
|
|
border: none;
|
|
}
|
|
td::before {
|
|
display: none;
|
|
}
|
|
th,
|
|
td {
|
|
padding: var(--space-s);
|
|
text-align: start;
|
|
display: table-cell;
|
|
}
|
|
}
|