Dokumentasi lan conto kanggo milih gaya tabel (diwenehi panggunaan umum ing plugin JavaScript) nganggo Bootstrap.
Ing kaca iki
Ringkesan
Amarga panggunaan <table>unsur sing nyebar ing widget pihak katelu kaya tanggalan lan pemilih tanggal, tabel Bootstrap dipilih . Tambah kelas dasar .tablemenyang sembarang <table>, banjur tambah karo kelas modifier opsional utawa gaya khusus. Kabeh gaya meja ora diwarisake ing Bootstrap, tegese sembarang tabel nested bisa ditata bebas saka wong tuwa.
Nggunakake markup tabel paling dhasar, kene carane .tabletabel basis katon ing Bootstrap.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry the Bird
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Varian
Gunakake kelas kontekstual kanggo werna tabel, baris tabel utawa sel individu.
kelas
judhul
judhul
Default
sel
sel
utami
sel
sel
Sekunder
sel
sel
Sukses
sel
sel
bebaya
sel
sel
Pènget
sel
sel
Info
sel
sel
cahya
sel
sel
Peteng
sel
sel
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .visually-hiddenkelas.
Tabel aksen
Larik belang
Gunakake .table-stripedkanggo nambah zebra-striping menyang sembarang baris tabel ing <tbody>.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry the Bird
@twitter
<tableclass="table table-striped">
...
</table>
Kelas kasebut uga bisa ditambahake menyang varian tabel:
Kita miwiti kanthi nyetel latar mburi sel tabel kanthi --bs-table-bgproperti khusus. Kabeh varian tabel banjur nyetel properti khusus kasebut kanggo menehi warna sel tabel. Kanthi cara iki, kita ora bakal ngalami alangan yen warna semi-transparan digunakake minangka latar mburi meja.
Banjur kita nambah bayangan kothak inset ing sel meja kanthi box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lapisan ing ndhuwur sembarang sing ditemtokake background-color. Amarga kita nggunakake panyebaran ageng lan ora kabur, werna bakal monoton. Amarga --bs-table-accent-bgora disetel kanthi gawan, kita ora duwe bayangan kothak standar.
Nalika salah siji .table-striped, .table-hoverutawa .table-activekelas ditambahake, --bs-table-accent-bgdisetel dadi warna semitransparan kanggo menehi warna latar mburi.
Kanggo saben varian tabel, kita ngasilake --bs-table-accent-bgwarna kanthi kontras paling dhuwur gumantung saka warna kasebut. Contone, werna aksen kanggo .table-primaryluwih peteng nalika .table-darknduweni werna aksen sing luwih entheng.
Werna teks lan wewatesan digawe kanthi cara sing padha, lan werna kasebut diwarisake kanthi standar.
Tabel sel <thead>tansah didadekake siji vertikal ing ngisor. Sèl-sèl tabel ing <tbody>marisi alignment saka <table>lan didadekake siji kanggo ndhuwur minangka standar. Gunakake kelas kempal vertikal kanggo nyelarasake maneh yen perlu.
Heading 1
Heading 2
Judul 3
Judul 4
Sèl iki warisan vertical-align: middle;saka tabel
Sèl iki warisan vertical-align: middle;saka tabel
Sèl iki warisan vertical-align: middle;saka tabel
Iki minangka sawetara teks placeholder, sing dimaksudake kanggo njupuk spasi vertikal sing cukup, kanggo nduduhake cara kerjane keselarasan vertikal ing sel sadurunge.
Sèl iki warisan vertical-align: bottom;saka baris tabel
Sèl iki warisan vertical-align: bottom;saka baris tabel
Sèl iki warisan vertical-align: bottom;saka baris tabel
Iki minangka sawetara teks placeholder, sing dimaksudake kanggo njupuk spasi vertikal sing cukup, kanggo nduduhake cara kerjane keselarasan vertikal ing sel sadurunge.
Sèl iki warisan vertical-align: middle;saka tabel
Sèl iki warisan vertical-align: middle;saka tabel
Sel iki didadekake siji menyang ndhuwur.
Iki minangka sawetara teks placeholder, sing dimaksudake kanggo njupuk spasi vertikal sing cukup, kanggo nduduhake cara kerjane keselarasan vertikal ing sel sadurunge.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
nyarang
Gaya tapel wates, gaya aktif, lan varian tabel ora diwarisake dening tabel bersarang.
Kanggo nyegah gaya apa wae saka bocor menyang tabel bersarang, kita nggunakake >pamilih kombinator anak ( ) ing CSS kita. Awit kita kudu Doel kabeh tds lan ths ing thead, tbody, lan tfoot, pamilih kita bakal katon cantik dawa tanpa iku. .table > :not(caption) > * > *Nalika kuwi, kita nggunakake pamilih looking rodo aneh kanggo Doel kabeh tds lan ths saka .table, nanging ora ana sembarang tabel nested potensial.
Elinga yen sampeyan nambah <tr>s minangka anak langsung saka meja, sing <tr>bakal kebungkus ing <tbody>standar, saéngga pamilih kita bisa digunakake minangka dimaksudaké.
Anatomi
Kepala meja
Kaya karo tabel lan tabel peteng, gunakake kelas modifier .table-lightutawa .table-darknggawe <thead>s katon abu-abu cahya utawa peteng.
A <caption>fungsi kaya judhul kanggo tabel. Iku mbantu pangguna karo maca layar kanggo nemokake tabel lan ngerti apa iku lan mutusaké apa padha arep maca.
Dhaptar pangguna
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry the Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Sampeyan uga bisa sijine <caption>ing ndhuwur meja karo .caption-top.
Dhaptar pangguna
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry
si Manuk
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Tabel responsif
Tabel responsif ngidini tabel bisa digulung kanthi horisontal kanthi gampang. Nggawe tabel responsif ing kabeh viewports kanthi mbungkus .tablekaro .table-responsive. Utawa, pilih breakpoint maksimum sing bisa digunakake kanggo tabel responsif kanthi nggunakake .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Kliping / pemotongan vertikal
Tabel responsif nggunakake overflow-y: hidden, sing ngethok konten sing ngluwihi sisih ngisor utawa ndhuwur meja. Utamane, iki bisa ngilangi menu gulung mudhun lan widget pihak katelu liyane.
Tansah responsif
Ing saben breakpoint, gunakake .table-responsivekanggo nggulung tabel horisontal.
Gunakake .table-responsive{-sm|-md|-lg|-xl|-xxl}yen perlu kanggo nggawe tabel responsif nganti breakpoint tartamtu. Saka breakpoint lan munggah, tabel bakal tumindak normal lan ora nggulung horisontal.
Tabel kasebut bisa uga katon rusak nganti gaya responsif ditrapake ing jembar viewport tartamtu.