Borderless Header Table

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

/* --- The Header Styling --- */
.borderless-header-table thead {
    background-color: #34495e; /* A strong header color */
    color: #ffffff;
}
.borderless-header-table thead th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border: none; /* The key to the effect: no borders on header cells */
}

/* --- The Body Styling --- */
.borderless-header-table tbody td {
    padding: 12px 15px;
    border-top: 1px solid #ccc; /* Horizontal line between rows */
    border-right: 1px solid #ccc; /* Vertical line between cells */
}
/* Remove the right border on the last cell in a row */
.borderless-header-table tbody td:last-child {
    border-right: none;
}
.borderless-header-table .td-center {
    text-align: center;
}
.borderless-header-table tbody tr:hover {
    background-color: #f5f5f5;
}

</style>

<table class="borderless-header-table">
    <thead>
        <tr>
            <th scope="col">Task Name</th>
            <th scope="col">Assigned To</th>
            <th scope="col" class="td-center">Priority</th>
            <th scope="col">Due Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Finalize Q3 Report</td>
            <td>Alicia Keys</td>
            <td class="td-center">High</td>
            <td>2025-09-25</td>
        </tr>
        <tr>
            <td>Design New Landing Page Mockup</td>
            <td>Bruno Mars</td>
            <td class="td-center">Medium</td>
            <td>2025-10-01</td>
        </tr>
        <tr>
            <td>Test API Endpoints</td>
            <td>Cardi B</td>
            <td class="td-center">High</td>
            <td>2025-09-28</td>
        </tr>
        <tr>
            <td>Update Help Documentation</td>
            <td>Dua Lipa</td>
            <td class="td-center">Low</td>
            <td>2025-10-15</td>
        </tr>
    </tbody>
</table>