Compact Table

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

.table-compact thead th {
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.table-compact th,
.table-compact td {
    text-align: left;
    /* Reducing padding significantly for a compact look */
    padding: 5px 8px; 
    border-bottom: 1px solid #e9ecef;
}

/* Optional: remove the bottom border on the last row for a cleaner look */
.table-compact tbody tr:last-of-type td {
    border-bottom: none;
}
</style>

<table class="table-compact">
    <thead>
        <tr>
            <th scope="col">Timestamp</th>
            <th scope="col">Service</th>
            <th scope="col">Level</th>
            <th scope="col">Message</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2024-05-22 10:01:05</td>
            <td>auth-service</td>
            <td>INFO</td>
            <td>User 'pgriffin' logged in successfully from IP 192.168.1.10.</td>
        </tr>
        <tr>
            <td>2024-05-22 10:01:12</td>
            <td>api-gateway</td>
            <td>DEBUG</td>
            <td>Request received for endpoint /v1/data.</td>
        </tr>
        <tr>
            <td>2024-05-22 10:01:15</td>
            <td>database-svc</td>
            <td>WARN</td>
            <td>Query time exceeded 500ms for SELECT * FROM users.</td>
        </tr>
        <tr>
            <td>2024-05-22 10:01:21</td>
            <td>auth-service</td>
            <td>ERROR</td>
            <td>Failed login attempt for user 'admin' from IP 203.0.113.5.</td>
        </tr>
         <tr>
            <td>2024-05-22 10:02:00</td>
            <td>worker-1</td>
            <td>INFO</td>
            <td>Job #5421 completed successfully in 3.2s.</td>
        </tr>
    </tbody>
</table>