Rounded Corner Table

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

.rounded-table thead th {
    background-color: #f5f5f5;
    padding: 12px;
    text-align: left;
    font-weight: 600;
}

.rounded-table tbody td {
    padding: 12px;
    border-top: 1px solid #ddd; /* Only use top borders for rows */
}

.rounded-table tbody tr:hover {
    background-color: #fafafa;
}

.rounded-table .file-name {
    font-family: monospace;
    font-weight: 600;
    color: #333;
}

</style>

<table class="rounded-table">
    <thead>
        <tr>
            <th scope="col">File Name</th>
            <th scope="col">File Size</th>
            <th scope="col">Date Uploaded</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="file-name">annual-report-2024.pdf</td>
            <td>2.5 MB</td>
            <td>2024-08-15</td>
        </tr>
        <tr>
            <td class="file-name">brand-assets.zip</td>
            <td>15.2 MB</td>
            <td>2024-08-12</td>
        </tr>
        <tr>
            <td class="file-name">meeting-notes-q3.docx</td>
            <td>128 KB</td>
            <td>2024-08-10</td>
        </tr>
         <tr>
            <td class="file-name">website-mockup-v3.png</td>
            <td>850 KB</td>
            <td>2024-08-09</td>
        </tr>
    </tbody>
</table>