Kolumny za pomocą tabel CSS
To nie mają być kolumny na tabelach HTML, tylko dowolne elementy z nadanym tabelarycznym wyglądem za pomocą CSS.
Ograniczenia
W przeciwieństwie do innych rozwiązań jest dużo mniej problemów z wysokością kolumn i łatwo jest wyrównać zawartość w pionie.
Głównym ograniczeniem jest niemożność użycia pozycjonowania absolutnego względem elementów tabel. Przez to nie da się umieścić w kolumnach zawartości jednocześnie na górze i na dole, chyba że wysokość kolumny będzie z góry narzucona.
Tworzenie kolumn
Układy dla dowolnej ilości kolumn robi się tak samo — trzeba nadać display:table-cell
wszystkim elementom tworzącym kolumny oraz otoczyć wszystkie kolumny elementem
z display:table
:
<div id="wrapper">
<div class="kolumna">
pierwsza</div>
<div class="kolumna">
druga</div>
<div class="kolumna">
trzecia</div>
</div>
#wrapper {width:100%; display:table;}
.kolumna {display:table-cell;}
Domyślnie tabele mają szerokość dopasowaną do zawartości (to jest inne zachowanie, niż normalnie), dlatego dobrze jest dodać width:100%
.
Tekst nie mieszczący się w komórkach może powodować rozciąganie kolumn i całej tabeli. Radą na to jest określenie szerokości wszystkich komórek oraz nadanie table-layout:fixed
elementowi z display:table
("wrapperowi")
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 15.08.2006, 12:43