@import "./../../common/modern-reset.css";

body {
    margin: 50px;
}

.table-wrapper {
    block-size: 625px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding: 0;
}

.table-styling {
    table-layout: fixed;
    border: 1px solid currentColor;
    border-spacing: 0;
    border-collapse: collapse;
    inline-size: 100%;
}

.number {
    inline-size: 10%;
}

.name {
    inline-size: 20%;
}
.email {
    inline-size: 40%;
}
.phone {
    inline-size: 30%;
}

thead {
    background-color: sandybrown;
}

th,
td {
    border: 1px solid currentColor;
    padding: 1em;
}

tbody tr:nth-child(even) {
    background-color: silver;
}

tbody tr {
    scroll-snap-align: start;
}

thead {
    position: sticky;
    inset-block-start: 0;
}