Bootstrap

Responsivne tablice

Upotrebom klase class="table" kreira se responsivna tablica. Tablica je 100% široka i responsivna je.

Primjer osnovne responsivne tablice.
vidi code » vidi stranicu

Zebra tablica

Da bi se dobio zebra efekt tablice, tj. da je svaki drugi red sivkaste boje treba upotrijebiti class="table table-striped".

Primjer zebra tablice.
vidi code » vidi stranicu

Ako želimo da se zebra tablica posebno prilagodi bojom pozadine i fontom upotrijebit ćemo:

Uokvirena tablica

Da bi tablica poprimila okvir treba upotrijebiti class="table table-bordered"

Primjer bordered tablice.
Primjetiti da je tablica stavljena unutar .container klase da bi se vidjeli bočni okviri.
vidi code » vidi stranicu

Da bi se izmijenio izgled okvira tablice može se upotrijebiti:

Zgusnuta tablica

Da bi redovi bili gušći upotrijebiti class="table-condensed".

Primjer zgusnute tablice.
vidi code » vidi stranicu

Hover

Kako bi se postigao hover efekt tj. prelaskom miša da red mijenja boju upotrijebit ćemo class="table-hover".

Primjer hover tablice.
Primjer također pokazuje i contextualne redove, npr. class="danger" unutar TR taga. vidi code » vidi stranicu

Tablice sa dugačkim redovima

Kako bi se pojavio horizontalni scroll bar kod tablica sa dugačkim redovima potrebno je unutar DIV taga koji omotava TABLE tag, napisati klasu table-responsive.

Primjer pokazuje ponašanje tablice koja ima i koja nema CSS klasu table-responsive. vidi code » vidi stranicu