Responsive Side-by-Side Tables Layout

This example demonstrates an advanced, optimized implementation of two tables displayed side by side. It utilizes the latest CSS techniques, such as Container Queries, CSS Grid, and Flexbox, to ensure an optimal user experience across all devices. A key highlight of this tutorial is the intelligent switching between horizontal and vertical layouts based on screen size, with added enhancements for accessibility and mobile data readability.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Side-by-Side Tables - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="table-side-by-side-container">
        <div class="table-side-by-side-row">
            <table class="tabela">
                <caption>First Group</caption>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Ime">John</td>
                        <td data-label="Priimek">Doe</td>
                        <td data-label="Točke">583</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Jane</td>
                        <td data-label="Priimek">Smith</td>
                        <td data-label="Točke">946</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Robert</td>
                        <td data-label="Priimek">Johnson</td>
                        <td data-label="Točke">167</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Emily</td>
                        <td data-label="Priimek">Davis</td>
                        <td data-label="Točke">1973</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Michael</td>
                        <td data-label="Priimek">Wilson</td>
                        <td data-label="Točke">173</td>
                    </tr>
                </tbody>
            </table>
                
            <table class="tabela">
                <caption>Second Group</caption>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Ime">William</td>
                        <td data-label="Priimek">Brown</td>
                        <td data-label="Točke">13</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">David</td>
                        <td data-label="Priimek">Miller</td>
                        <td data-label="Točke">67</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Richard</td>
                        <td data-label="Priimek">Jones</td>
                        <td data-label="Točke">994</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Joseph</td>
                        <td data-label="Priimek">Garcia</td>
                        <td data-label="Točke">1293</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Thomas</td>
                        <td data-label="Priimek">Rodriguez</td>
                        <td data-label="Točke">74</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
        
                    

                        :root {
    --tbl-bg: var(--card, #ffffff);
    --tbl-fg: var(--fg, #1e293b);
    --tbl-border: var(--border, #e2e8f0);
    --tbl-accent: var(--accent, #007bff);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg, #f8fafc);
}

.table-side-by-side-container {
    width: 100%;
    padding: 30px 15px;
    max-width: 1100px;
    margin: 0 auto;
}

.table-side-by-side-row {
    display: flex;
    flex-direction: row; /* Tables stand side by side */
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.tabela {
    flex: 1;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--tbl-bg);
    border: 1px solid var(--tbl-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Modern, centered table caption styled like a card header */
.tabela caption {
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px;
    background-color: var(--tbl-bg);
    color: var(--tbl-fg);
    border: 1px solid var(--tbl-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    letter-spacing: -0.01em;
}

.tabela th, .tabela td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--tbl-border);
    font-size: 0.95rem;
}

.tabela thead th {
    background: var(--bg, #f1f5f9);
    color: var(--fg, #333);
    -webkit-text-fill-color: var(--fg, #333);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tabela tbody tr {
    transition: background-color 0.2s ease;
    color: var(--fg, #333);
    -webkit-text-fill-color: var(--fg, #333);
}

.tabela tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.01);
    color: red;
}

/* Alternating rows (Zebra striping) */
.tabela tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.01);
}

.tabela tbody tr:last-child td {
    border-bottom: none; /* Remove bottom border for the last row */
}

/* Responsive adjustment for narrow mobile screens (under 480px) */
@media (max-width: 480px) {
    .tabela { 
        border: none; 
        background: transparent;
        box-shadow: none;
    }
    .tabela thead {
        display: none; /* Hide the classic header */
    }
    .tabela caption {
        border-bottom: 1px solid var(--tbl-border);
        margin-bottom: 10px;
    }
    .tabela tr {
        display: block; 
        margin-bottom: 12px; 
        border: 1px solid var(--tbl-border);
        border-radius: 8px;
        background: var(--tbl-bg);
        padding: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.01);
    }
    .tabela td {
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        border: none; 
        border-bottom: 1px solid var(--bg, #f1f5f9);
        padding: 10px;
    }
    .tabela td:last-child {
        border-bottom: none;
    }
    .tabela td::before {
        content: attr(data-label);
        font-weight: 700; 
        color: #64748b; 
        font-size: 0.85rem;
    }
}
        
                    

RESULT

Side-by-Side Responsive Data Tables