Odzivne tabele v postavitvi drug ob drugi

Ta primer prikazuje napredno implementacijo dveh tabel v vzporedni postavitvi, optimizirano. Uporablja najnovejše CSS tehnike kot so Container Queries, CSS Grid in Flexbox za zagotavljanje optimalne uporabniške izkušnje na vseh napravah. Posebnost primera je inteligentno preklapljanje med horizontalno in vertikalno postavitvijo glede na velikost zaslona, z dodanimi izboljšavami za dostopnost in berljivost podatkov na mobilnih napravah.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Tabele ena ob drugi - Primer</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>Prva skupina</caption>
                <thead>
                    <tr>
                        <th>Ime</th>
                        <th>Priimek</th>
                        <th>Točke</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Ime">Prva</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">583</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Druga</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">946</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Tretja</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">167</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Četrta</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">1973</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Peta</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">173</td>
                    </tr>
                </tbody>
            </table>
                
            <table class="tabela">
                <caption>Druga skupina</caption>
                <thead>
                    <tr>
                        <th>Ime</th>
                        <th>Priimek</th>
                        <th>Točke</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Ime">Šesta</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">13</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Sedma</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">67</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Osma</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">994</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Deveta</td>
                        <td data-label="Priimek">Oseba</td>
                        <td data-label="Točke">1293</td>
                    </tr>
                    <tr>
                        <td data-label="Ime">Deseta</td>
                        <td data-label="Priimek">Oseba</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; /* Tabeli stojita vzporedno */
    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);
}

/* Moderen, centriran naslov tabele v obliki glave kartice */
.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;
}

/* Izmenične vrstice (Zebra vzorec) */
.tabela tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.01);
}

.tabela tbody tr:last-child td {
    border-bottom: none; /* Odstranimo spodnji rob pri zadnji vrstici */
}

/* Prilagoditev za ozke mobilne zaslone (pod 480px) */
@media (max-width: 480px) {
    .tabela { 
        border: none; 
        background: transparent;
        box-shadow: none;
    }
    .tabela thead {
        display: none; /* Skrijemo klasično glavo */
    }
    .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;
    }
}
        
                    

REZULTAT