CSS Lastnost: table-layout

Lastnost table-layout definira algoritem, ki se uporablja za postavitev celic, vrstic in stolpcev tabele. Če uporabimo table-layout: auto; je širina celic in njegove vsebine prilagojena vsebini, večina brskalnikov privzeto uporablja ta algoritem. Pri uporabi algoritma table-layout: fixed;, kjer je potrebno širino tabele izrecno določiti z lastnostjo širine. Če je vrednost lastnosti širine nastavljena na avtomatsko ali sploh ni določena, brskalnik uporabi algoritem za samodejno postavitev tabele, v tem primeru fiksna nastavitev nima učinka. Algoritem table-layout: fixed; je hitrejši od algoritma table-layout: auto;, ker je vodoravna postavitev tabele odvisna le od širine tabele. Širine stolpcev in obrob ali razlike med celicami. Horizontalna postavitev ni odvisna od vsebine celic, saj je odvisna le od širine.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>table-layout Primeri</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

        body {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .primer {
            margin-bottom: 40px;
        }

        .primer h2 {
            margin-bottom: 10px;
        }

        .opis {
            margin-bottom: 15px;
        }

        table {
            border-collapse: collapse;
            margin-bottom: 30px;
            background: white;
            color: #333333;
        }

        th, td {
            border: 1px solid #b8daff;
            padding: 10px;
        }

        th {
            background: #e7f3ff;
        }

        /* samodejna postavitev */
        .samodejna-tabela {
            width: 700px;
            table-layout: auto;
        }

        /* fiksna postavitev */
        .fiksna-tabela {
            width: 700px;
            table-layout: fixed;
        }

        /* odzivna postavitev */
        .odzivna-tabela {
            width: 100%;
            table-layout: fixed;
        }

        .dolga-vsebina {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* odzivno oblikovanje */
        @media screen and (max-width: 680px) {
            .samodejna-tabela, .fiksna-tabela {
                width: 100%;
            }
        
            table {
                font-size: 14px;
            }
        
            th, td {
                padding: 8px 5px;
            }
        
            .primer {
                margin-bottom: 30px;
            }
        
            h2 {
                font-size: 18px;
            }
        
            .opis {
                font-size: 14px;
            }
        }
        
        /* vertikalna postavitev za zelo ozke zaslone */
        @media screen and (max-width: 380px) {
            thead, th {
                display: none;
            }
        
            table, tbody, tr, td {
                display: block;
                width: 100%;
            }
        
            tr {
                margin-bottom: 20px;
                background: white;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                border-left: 4px solid #007bff;
            }
        
            td {
                padding: 12px 8px;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-top: 35px;
            }
        
            td::before {
                content: attr(data-label);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                padding: 8px;
                font-weight: bold;
                background: #f8f9fa;
                border-bottom: 2px solid #e9ecef;
                box-sizing: border-box;
            }
        
            td:last-child {
                border-bottom: none;
            }
        }
    </style>
</head>
<body>
<div class="primer">
    <h2>1. Table Layout: Auto</h2>
    <p class="opis">Širina stolpcev se prilagaja vsebini. Uporabno, ko je vsebina različnih dolžin.</p>
    <table class="samodejna-tabela">
        <tr>
            <th>Kratek naslov</th>
            <th>Srednje dolg naslov</th>
            <th>Zelo zelo dolg naslov stolpca</th>
        </tr>
        <tr>
            <td data-label="Kratek naslov">K</td>
            <td data-label="Srednje dolg naslov">Srednje besedilo</td>
            <td data-label="Zelo zelo dolg naslov stolpca">To je zelo dolgo besedilo, ki se razteza čez več besed.</td>
        </tr>
        <tr>
            <td data-label="Kratek naslov">X</td>
            <td data-label="Srednje dolg naslov">Nekaj teksta</td>
            <td data-label="Zelo zelo dolg naslov stolpca">Še en primer daljšega besedila v celici.</td>
        </tr>
    </table>
</div>
    
<div class="primer">
    <h2>2. Table Layout: Fixed</h2>
    <p class="opis">Vsi stolpci so enake širine, ne glede na vsebino. Dobro za enakomeren izgled.</p>
    <table class="fiksna-tabela">
        <tr>
            <th>Kratek naslov</th>
            <th>Srednje dolg naslov</th>
            <th>Zelo zelo dolg naslov stolpca.</th>
        </tr>
        <tr>
            <td data-label="Kratek naslov">K</td>
            <td data-label="Srednje dolg naslov">Srednje besedilo</td>
            <td data-label="Zelo zelo dolg naslov stolpca" class="dolga-vsebina">To je zelo dolgo besedilo, ki se 
            razteza čez več besed.</td>
        </tr>
        <tr>
            <td data-label="Kratek naslov">X</td>
            <td data-label="Srednje dolg naslov">Nekaj teksta</td>
            <td data-label="Zelo zelo dolg naslov stolpca" class="dolga-vsebina">Še en primer daljšega besedila v 
            celici.</td>
        </tr>
    </table>
</div>
    
<div class="primer">
    <h2>3. Table Layout: Responsive</h2>
    <p class="opis">Tabela se prilagaja širini zaslona. Idealno za mobilne naprave.</p>
    <table class="odzivna-tabela">
        <tr>
            <th>Kratek naslov</th>
            <th>Srednje dolg naslov</th>
            <th>Zelo zelo dolg naslov stolpca.</th>
        </tr>
        <tr>
            <td data-label="Kratek naslov">K</td>
            <td data-label="Srednje dolg naslov">Srednje besedilo</td>
            <td data-label="Zelo zelo dolg naslov stolpca" class="dolga-vsebina">To je zelo dolgo besedilo, ki se 
            razteza čez več besed.</td>
        </tr>
        <tr>
            <td data-label="Kratek naslov">X</td>
            <td data-label="Srednje dolg naslov">Nekaj teksta</td>
            <td data-label="Zelo zelo dolg naslov stolpca" class="dolga-vsebina">Še en primer daljšega besedila v 
            celici.</td>
        </tr>
    </table>
</div>
</body>
</html>

REZULTAT