display: table-column

Vrednost display: table-column povzroči, da se element obnaša kot element <col>. To pomeni, da bo element oblikovan kot stolpec znotraj tabele.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Display Table Column</title>
    <style>
        .tabela {
            display: table;
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .stolpec {
            display: table-column;
            background-color: #0056b3!important;
            width: 33.33%;
        }
        
        .vrstica {
            display: table-row;
        }
        
        .celica {
            display: table-cell;
            color: #FF4500!important;
            padding: 10px;
            border: 1px solid #ccc!important;
            text-align: center;
            -webkit-text-fill-color: #FF4500!important;
        }
    </style>
</head>
<body>
    <div class="tabela">
        <!-- Definicija stolpca -->
        <div class="stolpec"></div>
        
        <!-- Vsebina tabele -->
        <div class="vrstica">
            <div class="celica">Naslov</div>
            <div class="celica">Avtor</div>
        </div>
        <div class="vrstica">
            <div class="celica">Gospod prstanov</div>
            <div class="celica">J.R.R. Tolkien</div>
        </div>
    </div>
</body>
</html>

REZULTAT