BS5 jadvallar

Oddiy jadval

Oddiy Bootstrap 5 jadvali yengil ichki chekinish (padding) va gorizontal ajratgich chiziqlarga ega.

.table klassi jadvalga asosiy stillarni qo‘shadi:

Yo‘l-yo‘l qatorlar

.table-striped klassi jadvalga zebra kabi yo‘l-yo‘l chiziqlar qo‘shadi:

Chegarali jadval

.table-bordered klassi jadval va kataklarning barcha tomonlariga chegara qo‘shadi:

Hover effektli qatorlar

.table-hover klassi jadval qatorlariga hover effektini (sichqoncha ustiga olib borilganda kulrang fon) qo‘shadi:

Qora/to‘q rangli jadval

.table-dark klassi jadvalga qora fon qo‘shadi:

To‘q rangli yo‘l-yo‘l jadval

To‘q rangli, yo‘l-yo‘l jadval yaratish uchun .table-dark va .table-striped ni birgalikda qo‘llang:

Hover effektli to‘q rangli jadval

.table-hover klassi jadval qatorlariga hover effektini (sichqoncha ustiga olib borilganda kulrang fon) qo‘shadi:

Chegarasiz jadval

.table-borderless klassi jadvaldan chegaralarni olib tashlaydi:

Kontekstual klasslar

Kontekstual klasslar yordamida butun jadvalni (<table>), jadval qatorlarini (<tr>) yoki jadval kataklarini (<td>) bo‘yash mumkin.

Foydalanish mumkin bo‘lgan kontekstual klasslar:

Jadval sarlavhasi ranglari

Shuningdek, istalgan kontekstual klass yordamida faqat jadval sarlavhasiga fon rangi qo‘shishingiz mumkin:

Kichik jadval

.table-sm klassi kataklarning ichki chekinishini (padding) ikki baravar qisqartirib, jadvalni kichikroq qiladi:

Moslashuvchan jadvallar

.table-responsive klassi kerak bo‘lganda (jadval gorizontal bo‘yicha juda katta bo‘lganda) jadvalga aylantirish chizig‘ini (scrollbar) qo‘shadi:

Shuningdek, ekran kengligiga qarab jadvalda aylantirish chizig‘i qachon paydo bo‘lishini ham belgilashingiz mumkin: