Compact Dense Table - Free UI Component

Header Background #e2e8f0

Header Text Color #334155

Row Background #ffffff

Row Hover Fill #f8fafc

Text Color #0f172a

Border Color #cbd5e1

Vertical Padding (rem) 0.25

Horizontal Padding (rem) 0.5

Font Size (rem) 0.75

Container Width 1000px

Compact Dense Table

A highly condensed table format designed for admin panels and log viewers with extensive data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compact Dense Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --header-bg: {{headerBgColor}};
            --header-text: {{headerTextColor}};
            --row-bg: {{rowBgColor}};
            --row-hover: {{rowHoverBg}};
            --text-color: {{textColor}};
            --border-color: {{borderColor}};
            --v-pad: {{vPadding}}rem;
            --h-pad: {{hPadding}}rem;
            --font-size: {{fontSize}}rem;
            --table-w: {{tableWidth}};
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f4f5;
            color: var(--text-color);
            padding: 2rem 1rem;
            display: flex;
            justify-content: center;
        }

/* -- Table Implementation --------------------------------------- */
        .table-container {
            width: 100%;
            max-width: var(--table-w);
            background: var(--row-bg);
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }

.table-wrapper {
            width: 100%;
            overflow-x: auto;
        }

table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: var(--font-size);
        }

th {
            background-color: var(--header-bg);
            color: var(--header-text);
            font-weight: 700;
            padding: var(--v-pad) var(--h-pad);
            border-bottom: 1px solid var(--border-color);
            white-space: nowrap;
        }

td {
            padding: var(--v-pad) var(--h-pad);
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
            white-space: nowrap; /* Keep it dense */
        }

tbody tr {
            background-color: var(--row-bg);
        }

tbody tr:hover {
            background-color: var(--row-hover);
        }

tbody tr:last-child td {
            border-bottom: none;
        }

.timestamp {
            font-family: 'Space Mono', monospace;
            color: #64748b;
        }

.log-error { color: #dc2626; font-weight: 500; }
        .log-warn { color: #d97706; font-weight: 500; }
        .log-info { color: #0284c7; }
        .log-debug { color: #64748b; }

</style>
</head>
<body>

<div class="table-container">
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Level</th>
                        <th>Timestamp (UTC)</th>
                        <th>Service</th>
                        <th>Event ID</th>
                        <th>Message</th>
                        <th>User IP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="log-error">ERROR</td>
                        <td class="timestamp">2024-11-05 14:32:01.442</td>
                        <td>auth-service</td>
                        <td class="timestamp">EVT-99201</td>
                        <td>Database connection timeout to primary DB instance</td>
                        <td class="timestamp">-</td>
                    </tr>
                    <tr>
                        <td class="log-warn">WARN</td>
                        <td class="timestamp">2024-11-05 14:31:55.120</td>
                        <td>payment-gateway</td>
                        <td class="timestamp">EVT-99200</td>
                        <td>API rate limit approaching for upstream provider</td>
                        <td class="timestamp">-</td>
                    </tr>
                    <tr>
                        <td class="log-info">INFO</td>
                        <td class="timestamp">2024-11-05 14:30:12.887</td>
                        <td>web-client</td>
                        <td class="timestamp">EVT-99199</td>
                        <td>User session successfully created</td>
                        <td class="timestamp">192.168.1.44</td>
                    </tr>
                    <tr>
                        <td class="log-info">INFO</td>
                        <td class="timestamp">2024-11-05 14:28:44.012</td>
                        <td>web-client</td>
                        <td class="timestamp">EVT-99198</td>
                        <td>Login challenge requested</td>
                        <td class="timestamp">192.168.1.44</td>
                    </tr>
                    <tr>
                        <td class="log-debug">DEBUG</td>
                        <td class="timestamp">2024-11-05 14:25:00.001</td>
                        <td>scheduler-sys</td>
                        <td class="timestamp">EVT-99197</td>
                        <td>Running cleanup job cron execution</td>
                        <td class="timestamp">127.0.0.1</td>
                    </tr>
                    <tr>
                        <td class="log-info">INFO</td>
                        <td class="timestamp">2024-11-05 14:22:18.405</td>
                        <td>email-worker</td>
                        <td class="timestamp">EVT-99196</td>
                        <td>Batch 8472 dispatched successfully</td>
                        <td class="timestamp">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>