Stacked Rows on Mobile Table

<!DOCTYPE html>
<title>My Example</title>

.table-stacked thead {
    background-color: #2c3e50;
    color: #ffffff;
}

/* Visually hide thead on mobile, but keep for screen readers */
@media screen and (max-width: 768px) {
    .table-stacked thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}

.table-stacked th,
.table-stacked td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* START: Responsive stacking styles */
@media screen and (max-width: 768px) {
    .table-stacked,
    .table-stacked tbody,
    .table-stacked tr,
    .table-stacked td {
        display: block;
    }

.table-stacked tr {
        border: 1px solid #ccc;
        margin-bottom: 15px;
        border-radius: 5px;
    }

.table-stacked td {
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
        min-height: 35px; /* Ensures a minimum height for better touch targets */
    }

/* This is where the magic happens */
    .table-stacked td::before {
        /* Use the content from the data-label attribute */
        content: attr(data-label);

position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #2c3e50;
    }
}
/* END: Responsive stacking styles */

</style>

<table class="table-stacked">
    <thead>
        <tr>
            <th>Project Name</th>
            <th>Project Lead</th>
            <th>Due Date</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Project Name">Website Redesign</td>
            <td data-label="Project Lead">Alice Johnson</td>
            <td data-label="Due Date">2024-10-15</td>
            <td data-label="Status">In Progress</td>
        </tr>
        <tr>
            <td data-label="Project Name">API Integration</td>
            <td data-label="Project Lead">Bob Williams</td>
            <td data-label="Due Date">2024-09-30</td>
            <td data-label="Status">Completed</td>
        </tr>
        <tr>
            <td data-label="Project Name">Q4 Marketing Campaign</td>
            <td data-label="Project Lead">Charlie Brown</td>
            <td data-label="Due Date">2024-11-01</td>
            <td data-label="Status">Not Started</td>
        </tr>
        <tr>
            <td data-label="Project Name">Mobile App Launch</td>
            <td data-label="Project Lead">Diana Prince</td>
            <td data-label="Due Date">2024-12-20</td>
            <td data-label="Status">Blocked</td>
        </tr>
    </tbody>
</table>