CSS jadvallar
<table> klasslari
Istalgan jadvalni bezash uchun quyidagi klasslardan foydalaning:
| Klass | Tavsif | Misol |
|---|---|---|
| .table | Istalgan <table> elementiga asosiy stillarni (yengil ichki chekinish va faqat gorizontal ajratgich chiziqlar) qo‘shadi | Sinab ko‘ring |
| .table-striped | <tbody> ichidagi har qanday jadval qatoriga zebra kabi yo‘l-yo‘l chiziqlar qo‘shadi (IE8 da mavjud emas) | Sinab ko‘ring |
| .table-bordered | Jadval va kataklarning barcha tomonlariga chegara qo‘shadi | Sinab ko‘ring |
| .table-hover | <tbody> ichidagi jadval qatorlarida hover holatini yoqadi | Sinab ko‘ring |
| .table-condensed | Kataklarning ichki chekinishini ikki baravar qisqartirib, jadvalni ixchamroq qiladi | Sinab ko‘ring |
| Barcha jadval klasslarini birlashtirish | Sinab ko‘ring | |
<tr>, <th> va <td> klasslari
Jadval qatorlari yoki kataklarini bo‘yash uchun quyidagi klasslardan foydalaning:
| Klass | Tavsif | Misol |
|---|---|---|
| .active | Muayyan qator yoki katakka hover rangini (och kulrang) qo‘llaydi | Sinab ko‘ring |
| .success | Muvaffaqiyatli yoki ijobiy harakatni bildiradi | Sinab ko‘ring |
| .info | Neytral, axborot beruvchi o‘zgarish yoki harakatni bildiradi | Sinab ko‘ring |
| .warning | E’tibor talab qilishi mumkin bo‘lgan ogohlantirishni bildiradi | Sinab ko‘ring |
| .danger | Xavfli yoki salbiy oqibatga olib kelishi mumkin bo‘lgan harakatni bildiradi | Sinab ko‘ring |
Moslashuvchan jadvallar
.table-responsive klassi moslashuvchan jadval yaratadi. Shunda jadval kichik qurilmalarda (768px dan kichik) gorizontal aylantiriladi. Kengligi 768px dan katta ekranlarda hech qanday farq bo‘lmaydi:
Misol
<div class="table-responsive">
<table class="table">
...
</table>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!