Sticky Header and Footer Table - Free UI Component

Header Background #2563eb

Header Text Color #ffffff

Footer Background #eff6ff

Footer Text Color #1e3a8a

Row Background #ffffff

Stripe Background #f8fafc

Text Color #334155

Border Color #bfdbfe

Max Height (px) 400

Container Width 1000px

Sticky Header and Footer Table

A scrollable table featuring both a fixed sticky header and a fixed sticky footer for persistent totals or metadata.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header and Footer 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&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --header-bg: {{headerBgColor}};
            --header-text: {{headerTextColor}};
            --footer-bg: {{footerBgColor}};
            --footer-text: {{footerTextColor}};
            --row-base: {{rowBgColor}};
            --row-stripe: {{stripeColor}};
            --text-color: {{textColor}};
            --border-color: {{borderColor}};
            --max-height: {{maxHeight}}px;
            --table-w: {{tableWidth}};
        }

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

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

/* -- Table Implementation --------------------------------------- */
        .table-container {
            width: 100%;
            max-width: var(--table-w);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-color);
            background: var(--row-base);
            /* Scroll configuration */
            max-height: var(--max-height);
            overflow-y: auto;
            overflow-x: auto;
        }

table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            text-align: left;
            font-size: 0.95rem;
        }

/* STICKY HEADER */
        thead th {
            background-color: var(--header-bg);
            color: var(--header-text);
            font-weight: 700;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        thead th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: 2px solid var(--border-color);
        }

/* STICKY FOOTER */
        tfoot td {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            font-weight: 700;
            padding: 1rem;
            position: sticky;
            bottom: 0;
            z-index: 10;
        }
        tfoot td::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            border-top: 2px solid var(--border-color);
        }

/* BODY CELLS */
        tbody td {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
        }
        tbody tr:nth-child(even) {
            background-color: var(--row-stripe);
        }

/* Numeric alignment */
        .num { text-align: right; font-variant-numeric: tabular-nums; }
        .trend-up { color: #16a34a; font-size: 0.85em; margin-left: 6px; }
        .trend-down { color: #dc2626; font-size: 0.85em; margin-left: 6px; }

</style>
</head>
<body>

<div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Territory Component</th>
                    <th>Manager Lead</th>
                    <th class="num">Q1 Revenue</th>
                    <th class="num">Q2 Revenue</th>
                    <th class="num">Q3 Revenue</th>
                    <th class="num">YTD Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>North America - Northeast</td>
                    <td>Elena Rostova</td>
                    <td class="num">$1,245,000</td>
                    <td class="num">$1,310,500</td>
                    <td class="num">$1,450,200 <span class="trend-up">↑</span></td>
                    <td class="num" style="font-weight:500;">$4,005,700</td>
                </tr>
                <tr>
                    <td>North America - West Coast</td>
                    <td>Marcus Vance</td>
                    <td class="num">$2,100,000</td>
                    <td class="num">$1,950,000</td>
                    <td class="num">$2,050,000 <span class="trend-up">↑</span></td>
                    <td class="num" style="font-weight:500;">$6,100,000</td>
                </tr>
                <tr>
                    <td>EMEA - Central Europe</td>
                    <td>Sylvie DuPont</td>
                    <td class="num">$980,000</td>
                    <td class="num">$850,000</td>
                    <td class="num">$810,000 <span class="trend-down">↓</span></td>
                    <td class="num" style="font-weight:500;">$2,640,000</td>
                </tr>
                <tr>
                    <td>EMEA - UK & Ireland</td>
                    <td>Liam O'Connor</td>
                    <td class="num">$1,400,000</td>
                    <td class="num">$1,420,000</td>
                    <td class="num">$1,480,500 <span class="trend-up">↑</span></td>
                    <td class="num" style="font-weight:500;">$4,300,500</td>
                </tr>
                <tr>
                    <td>APAC - Japan</td>
                    <td>Kenji Sato</td>
                    <td class="num">$1,750,000</td>
                    <td class="num">$1,800,000</td>
                    <td class="num">$1,920,000 <span class="trend-up">↑</span></td>
                    <td class="num" style="font-weight:500;">$5,470,000</td>
                </tr>
                <tr>
                    <td>APAC - Oceania</td>
                    <td>Chloe Williams</td>
                    <td class="num">$620,000</td>
                    <td class="num">$640,000</td>
                    <td class="num">$590,000 <span class="trend-down">↓</span></td>
                    <td class="num" style="font-weight:500;">$1,850,000</td>
                </tr>
                <tr>
                    <td>LATAM - Brazil</td>
                    <td>Rafael Costa</td>
                    <td class="num">$450,000</td>
                    <td class="num">$510,000</td>
                    <td class="num">$580,000 <span class="trend-up">↑</span></td>
                    <td class="num" style="font-weight:500;">$1,540,000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">Global Aggregated Metrics</td>
                    <td class="num">$8,545,000</td>
                    <td class="num">$8,480,500</td>
                    <td class="num">$8,880,700 <span class="trend-up">↑</span></td>
                    <td class="num" style="font-weight:700;">$25,906,200</td>
                </tr>
            </tfoot>
        </table>
    </div>

</body>
</html>