Card like Rows Table

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

/* Visually hide the table header, but keep it for screen readers. */
.card-like-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.card-like-table tbody tr {
    /* Each row acts as a card container */
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 6px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.card-like-table tbody tr:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    cursor: pointer;
}

/* Style the cells within the card-row */
.card-like-table td {
    padding: 15px 20px;
}
/* Apply rounded corners to the first and last cell of each row */
.card-like-table td:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.card-like-table td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    text-align: right; /* Often the last cell contains actions or status */
}

.card-like-table .task-title {
    font-weight: 600;
    color: #2c3e50;
}

.card-like-table .project-name {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.card-like-table .due-date {
    font-size: 0.9rem;
    font-weight: 500;
}
</style>

<div class="card-table-container">
    <table class="card-like-table">
        
        <thead>
            <tr>
                <th scope="col">Task</th>
                <th scope="col">Project</th>
                <th scope="col">Due Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class="task-title">Design wireframes for new feature</span></td>
                <td><span class="project-name">Project Phoenix</span></td>
                <td><span class="due-date">Oct 15, 2024</span></td>
            </tr>
            <tr>
                <td><span class="task-title">Conduct user testing session</span></td>
                <td><span class="project-name">Mobile App Refresh</span></td>
                <td><span class="due-date">Oct 18, 2024</span></td>
            </tr>
            <tr>
                <td><span class="task-title">Push security patch to production</span></td>
                <td><span class="project-name">Infra & Security</span></td>
                <td><span class="due-date">Oct 20, 2024</span></td>
            </tr>
             <tr>
                <td><span class="task-title">Prepare Q4 marketing materials</span></td>
                <td><span class="project-name">Marketing Campaign</span></td>
                <td><span class="due-date">Nov 01, 2024</span></td>
            </tr>
        </tbody>
    </table>
</div>