*:has(table) {
    display: flex;
    max-height: 90dvh;
    overflow: scroll;
}
table {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
}
table thead,
table tbody {

}
table thead tr th {
    background-color: var(--warna-lapisan-cerah);
}
table tr {
    display: flex;
}
table tr td {
    border-top: 1px solid var(--warna-lapisan-cerah);
}

table tr td,
table tr th {
    flex-basis: 10rem;
    flex-shrink: 0;
    text-align: left;
    padding: var(--saiz-separuh);
}
table tr td:not([data-jenis-rekod]),
table tr th:not([data-jenis-rekod]) {
    flex-basis: calc(3rem + var(--saiz-penuh));
    text-align: center;
}
table tr td:not([data-jenis-rekod]) fmc-lencana {
    display: grid;
    place-items: center;
    border-radius: var(--saiz-suku);
}
table tbody tr:nth-child(even) td {
    background-color: var(--warna-lapisan);
}

table thead th[data-jenis-rekod^="Nama"],
table tbody td[data-jenis-rekod^="Nama"] {
    flex-basis: attr(data-saiz-lajur rem, 20rem);
}
table thead th[data-jenis-rekod*="UID"],
table tbody td[data-jenis-rekod*="UID"] {
    flex-basis: attr(data-saiz-lajur rem, 10rem);
    word-break: break-all;
}
table tbody td[data-jenis-rekod="UID"] span {
    background-color: var(--warna-lalai);
}