Maciej Chałapuk

Tabela <table> jest jedynym elementem języka HTML, dla którego można określić tylko jeden wymiar – szerokość. Jej wysokość zależy od ilości wierszy i ich zawartości, a co za tym idzie, wartość scroll własności CSS overflow nie zadziała na tabeli, gdyż do poprawnego działania potrzebuje określonej wysokości elementu.

Kontener

Aby utworzyć tabelkę z paskiem przewijania wystarczy ją owinąć elementem <div>, określić jego wymiary i na nim ustawić overflow:scroll. Szerokość tabelki powinna być mniejsza od kontenera o szerokość paska przewijania (15px). Jeżeli tabelka posiada obramowanie, należy odpowiednio zmniejszyć jej szerokość.

<div style="width:300px; height:100px; overflow:scroll;">
 <table style="width:285px;">
  ...
 </table>
</div>

Ergonomia

Tabelka z paskiem przewijania będzie ergonomiczna tylko wtedy, gdy nagłówki kolumn pozostaną zawsze widoczne. Aby tego dokonać należy rozdzielić tabelkę na dwie. Jedną z nagłówkami, drugą z danymi. Następnie owinąć przewijalnym kontenerem tylko tą drugą, dzięki czemu pasek przewijania będzie zaczynał się wraz z początkiem danych w tabeli.

Oto działający przykład.

Wysokość

Jeżeli wysokość wszystkich wierszy tabeli jest jednakowa, można pokusić się o ustawienie wysokości kontenera będącej wielokrotnością wysokości wiersza. Do tego celu należy użyć jednostek em. Oczywiście nie obędzie się bez komentarza warunkowego dla IE.