Hover Highlight Table

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

.table-hover thead th {
    /* Style for the header */
    padding: 12px 15px;
    background-color: #f4f4f4;
    border-bottom: 2px solid #ccc;
    text-align: left;
}

.table-hover td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

/* This is the key part of the template */
.table-hover tbody tr:hover {
    background-color: #f5f5f5; /* A light grey for the highlight */
    cursor: pointer; /* Changes the cursor to a pointer to indicate interactivity */
}
</style>

<table class="table-hover">
    <thead>
        <tr>
            <th scope="col">Document Title</th>
            <th scope="col">Modified By</th>
            <th scope="col">Last Modified</th>
            <th scope="col">File Size</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q2 Financial Projections.xlsx</td>
            <td>Carol Danvers</td>
            <td>2024-05-20 11:45 AM</td>
            <td>1.2 MB</td>
        </tr>
        <tr>
            <td>Marketing Strategy Deck.pptx</td>
            <td>Peter Parker</td>
            <td>2024-05-19 03:22 PM</td>
            <td>5.8 MB</td>
        </tr>
        <tr>
            <td>Client Onboarding Notes.docx</td>
            <td>Jessica Jones</td>
            <td>2024-05-21 09:10 AM</td>
            <td>256 KB</td>
        </tr>
        <tr>
            <td>Project Phoenix Spec.pdf</td>
            <td>Bruce Banner</td>
            <td>2024-05-18 05:00 PM</td>
            <td>3.1 MB</td>
        </tr>
        <tr>
            <td>Final Logo Assets.zip</td>
            <td>Peter Parker</td>
            <td>2024-05-19 04:00 PM</td>
            <td>12.5 MB</td>
        </tr>
    </tbody>
</table>