BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
The real BF 2020

table-layout - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti table-layout nastavujeme algoritmus výpočtu šířky sloupců HTML tabulky. Šířka sloupců se může nastavovat podle jejich obsahu nebo může být vypočtena jen podle šířky tabulky.

Hodnoty

  • auto (výchozí) - Šířka sloupců se určuje na základě obsahu buněk, přesněji je sloupec široký podle nejdelší hodnoty v něm. Nevýhodou je, že se musí nejprve stáhnout celý obsah tabulky, aby prohlížeč mohl zjistit velikost jednotlivých sloupců.
  • fixed - Šířka sloupců vůbec nezáleží na jejich obsahu a určuje se pouze podle šířky tabulky. Tabulka se může začít vykreslovat hned po stažení prvního řádku.
  • inherit - Vlastnost empty-cells se zdědí od rodičovského elementu.

Ukázka

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Pokud nastavíme tabulce vlastnost table-layout na hodnotu fixed, budou všechny sloupce stejně široké bez ohledu na jejich obsah:

<!DOCTYPE html>
<html>
        <head>
                <style>
                table
                {
                        width: 100%;
                        table-layout: fixed;
                }
                </style>
        </head>
        <body>
                <table border="1">
                        <tr>
                                <th>Portrét</th>
                                <th>Jméno</th>
                                <th>Povolání</th>
                        <tr>
                                <td><img src="homer.png" alt="Homer Simpson" /></td>
                                <td>Homer Simpson</td>
                                <td>Bezpečnostní technik ve springfieldské jaderné elektrárně.</td>
                        </tr>
                        <tr>
                                <td><img src="lenny.png" alt="Lenny Leonard" /></td>
                                <td>Lenny Leonard</td>
                                <td>Pracovník ve springfieldské jaderné elektrárně.</td>
                        </tr>
                        <tr>
                                <td><img src="carl.png" alt="Carl Carlson" /></td>
                                <td>Carl Carlson</td>
                                <td>Pracovník ve springfieldské jaderné elektrárně.</td>
                        </tr>
                        <tr>
                                <td><img src="edna.png" alt="Enda Krabappel" /></td>
                                <td>Edna Krabappel</td>
                                <td>Učitelka na springfieldské základní škole.</td>
                        </tr>
                </table>
        </body>
</html>

Výsledek:

Ukázka schování prázdných buněk tabulky v CSS

Pokud ponecháme výchozí chování, bude nejširší ten sloupec tabulky, který má nejdělší obsah:

Ukázka schování prázdných buněk tabulky v CSS

 

Všechny články v sekci
Seznamy a tabulky - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!