Kolumny za pomocą tabel CSS

Opisany tutaj sposób nie działa w żadnej wersji Internet Explorera Bug w IE

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