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="kolumny">
   <div>pierwsza kolumna</div>
   <div>druga kolumna</div>
   <div>trzecia kolumna</div>
  </div>

  #kolumny {width:100%; display:table;}
  #kolumny > div {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.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Zmodyfikowano: 22.11.2007, 21:59
submit