I’ve created somewhat of a pseudo table for a project I’m working on for my school district. The concept is basically a table (not using HTML tables as a design choice) that when a cell (of which, each cell is its own element) is clicked, it copies the text, notifies the user and then fades back to the original text and background color.

However, due to the size of the table, overflow-x is purposely controlled, as a feature rather than an effect so the user can scroll left or right to read more columns on the table.

For some extra context, I have a main header row with its own background color and I’m using :nth-child() in CSS to alternate between white and light gray background colors for rows.

Now, the issue is that the background colors do not extend past the scroll overflow position on the x-coordinate. I’ve been developing web apps for a long time. This is something I’ve never seen before, and I’m completely stumped. What’s more confusing, is the background colors (in a rendered sense) seem to cut off halfway through the elements that fall on the scroll overflow position on the x-coordinate.

I’ve suspected this has something to do with the rows’ parent element having a defined width of 75% but I want to keep this behavior, I’ve tried adding an extra container to achieve the same effect but possibly fix the issue to no avail.

I’m honestly stumped, I also believe this to be an issue with CSS itself and I frankly don’t understand how this is even possible–please enlighten me if you’ve encountered this before.

HTML:

<div class="cells-list col" id="students">
    <div class="cells-rows">


        <div class="cells-row header-row row" id="main-row">
            <p class="main-cell cell">First</p>
            <p class="main-cell cell">Last</p>
            <p class="main-cell cell">Student ID</p>
            <p class="main-cell cell">Email</p>
            <p class="main-cell cell">Email Pass</p>
            <p class="main-cell cell">Guardian Email</p>
            <p class="main-cell cell">Chromebook #</p>
            <p class="main-cell cell">Homeroom</p>
            <p class="main-cell cell">PowerSchool Username</p>
            <p class="main-cell cell">PowerSchool Pass</p>
            <p class="main-cell cell">Canvas Username</p>
            <p class="main-cell cell">Canvas Pass</p>
            <p class="main-cell cell">Savvas Username</p>
            <p class="main-cell cell">Savvas Pass</p>
            <p class="main-cell cell">MGH Username</p>
            <p class="main-cell cell">MGH Pass</p>
        </div>

        <div class="cells-row row">
            <p class="cell">First</p>
            <p class="cell">Last</p>
            <p class="cell">Student ID</p>
            <p class="cell">Email</p>
            <p class="cell">Email Pass</p>
            <p class="cell">Guardian Email</p>
            <p class="cell">Chromebook #</p>
            <p class="cell">Homeroom</p>
            <p class="cell">PowerSchool Username</p>
            <p class="cell">PowerSchool Pass</p>
            <p class="cell">Canvas Username</p>
            <p class="cell">Canvas Pass</p>
            <p class="cell">Savvas Username</p>
            <p class="cell">Savvas Pass</p>
            <p class="cell">MGH Username</p>
            <p class="cell">MGH Pass</p>
        </div>

        <div class="cells-row row">
            <p class="cell">First</p>
            <p class="cell">Last</p>
            <p class="cell">Student ID</p>
            <p class="cell">Email</p>
            <p class="cell">Email Pass</p>
            <p class="cell">Guardian Email</p>
            <p class="cell">Chromebook #</p>
            <p class="cell">Homeroom</p>
            <p class="cell">PowerSchool Username</p>
            <p class="cell">PowerSchool Pass</p>
            <p class="cell">Canvas Username</p>
            <p class="cell">Canvas Pass</p>
            <p class="cell">Savvas Username</p>
            <p class="cell">Savvas Pass</p>
            <p class="cell">MGH Username</p>
            <p class="cell">MGH Pass</p>
        </div>

        <!-- Repeating rows, irrelevant for this post -->


    </div>
</div>

SCSS:

.cells-list {
    flex-direction: column !important;
    gap: 0 !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    .cells-rows {
        flex-direction: column !important;
        justify-content: flex-start;
        max-width: 75%;
        overflow: auto;
        .cells-row {
            flex-direction: row !important;
            justify-content: flex-start;
            &:first-child {
                background-color: gray !important;
            }
            &:nth-child(even) {
                background-color: lightgray;
            }
            &:nth-child(odd) {
                background-color: white;
            }
            .cell {
                justify-content: center;
                align-items: center;
                min-width: 150px;
                width: 150px;
                max-width: 150px;
                padding: 0.25rem;
                padding-inline: 0.5rem;
                border: 1px solid black;
                user-select: none;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .cell:not(.main-cell) {
                cursor: pointer;
                &:active {
                    //background-color: $s1;
                    border: 2px solid black;
                }
                &:focus {
                    border: 2px solid black;
                }
            }
        }
        #main-row {
            .cell {
                font-weight: bold;
            }
        }
    }
}