Documentation sy ohatra amin'ny fanaovana styling amin'ny latabatra (nomena ny fampiasana azy ireo amin'ny plugins JavaScript) miaraka amin'ny Bootstrap.
Amin'ity pejy ity
Overview
Noho ny fiparitahan'ny <table>singa amin'ny widgets an'ny antoko fahatelo toy ny kalandrie sy ny mpanangona daty, ny latabatra Bootstrap dia nisafidy . Ampio ny kilasin'ny fototra .tableamin'izay rehetra <table>, avy eo ampidiro miaraka amin'ireo kilasy modifier na fomba fanao mahazatra. Tsy lovaina ao amin'ny Bootstrap ny fomba latabatra rehetra, midika izany fa ny latabatra misy akany dia azo atao tsy miankina amin'ny ray aman-dreny.
Amin'ny fampiasana ny marika latabatra fototra indrindra, ity ny fomba .tablefijerin'ny tabilao mifototra amin'ny Bootstrap.
#
VOALOHANY
FARANY
tahony
1
marika
Otto
@mdo
2
Jakoba
Thornton
@matavy
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>
Variants
Mampiasà kilasy contextual handokoana latabatra, andalana latabatra na sela tsirairay.
KILASY
sasin-tenin'ny
sasin-tenin'ny
toerana misy anao
SELA
SELA
Kilonga
SELA
SELA
faharoa
SELA
SELA
FETY
SELA
SELA
Loza
SELA
SELA
FAMPITANDREMANA
SELA
SELA
Info
SELA
SELA
fahazavana
SELA
SELA
Maizina
SELA
SELA
<!-- 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>
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.
latabatra misy accent
Mitsipika mitsipika
Ampiasao .table-stripedmba hanampiana zebra-striping amin'ny andalana latabatra ao anatin'ny <tbody>.
#
VOALOHANY
FARANY
tahony
1
marika
Otto
@mdo
2
Jakoba
Thornton
@matavy
3
Larry the Bird
@twitter
<tableclass="table table-striped">
...
</table>
Ireo kilasy ireo koa dia azo ampiana amin'ny variana latabatra:
Manomboka amin'ny fametrahana ny lafin'ny sela latabatra misy ny --bs-table-bgfananana manokana. Ny variana latabatra rehetra avy eo dia mametraka io fananana manokana io mba handokoana ny sela latabatra. Amin'izany fomba izany, tsy ho sahirana isika raha mampiasa loko semi-mangarahara ho fiaviana latabatra.
Avy eo dia ampiana alokaloka anaty boaty eo amin'ny selan'ny latabatra miaraka box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);amin'ny sosona eo an-tampon'ny zavatra voafaritra background-color. Satria mampiasa fiparitahana lehibe izahay ary tsy misy blur, dia ho monotone ny loko. Satria --bs-table-accent-bgtsy napetraka amin'ny alàlan'ny default, dia tsy manana alokaloka boaty default izahay.
Rehefa ampiana ny .table-striped, .table-hoverna .table-activeny kilasy, --bs-table-accent-bgdia apetraka amin'ny loko semitransparent ny loko mba handokoana ny afara.
Ho an'ny variana latabatra tsirairay, dia mamorona --bs-table-accent-bgloko misy fifanoherana ambony indrindra miankina amin'io loko io izahay. Ohatra, ny loko lantom-peo ho an'ny .table-primarydia maizina kokoa raha .table-darkmisy loko lantom-peo maivana kokoa.
Ny lokon'ny soratra sy ny sisintany dia voaforona toy izany koa, ary ny lokon'izy ireo dia nolovaina tamin'ny alàlan'ny default.
Ny selan'ny latabatra <thead>dia mitsangana mitsangana hatrany ambany. Ny selan'ny tabilao ao dia <tbody>mandova ny filaharan'izy ireo avy <table>ary ampifandraisina amin'ny tampony amin'ny alàlan'ny default. Ampiasao ireo kilasy marindrano mitsangana mba hanitsiana indray raha ilaina.
Lohateny 1
Lohateny 2
Lohateny 3
Lohateny 4
Ity sela ity dia mandova vertical-align: middle;avy amin'ny latabatra
Ity sela ity dia mandova vertical-align: middle;avy amin'ny latabatra
Ity sela ity dia mandova vertical-align: middle;avy amin'ny latabatra
Ity misy lahatsoratra mpihazona toerana, natao haka toerana mitsangana kely, mba hampisehoana ny fomba fiasan'ny fampifanarahana mitsangana ao amin'ireo sela teo aloha.
Ity sela ity dia mandova vertical-align: bottom;avy amin'ny laharana latabatra
Ity sela ity dia mandova vertical-align: bottom;avy amin'ny laharana latabatra
Ity sela ity dia mandova vertical-align: bottom;avy amin'ny laharana latabatra
Ity misy lahatsoratra mpihazona toerana, natao haka toerana mitsangana kely, mba hampisehoana ny fomba fiasan'ny fampifanarahana mitsangana ao amin'ireo sela teo aloha.
Ity sela ity dia mandova vertical-align: middle;avy amin'ny latabatra
Ity sela ity dia mandova vertical-align: middle;avy amin'ny latabatra
Ity sela ity dia mifanandrify amin'ny tampony.
Ity misy lahatsoratra mpihazona toerana, natao haka toerana mitsangana kely, mba hampisehoana ny fomba fiasan'ny fampifanarahana mitsangana ao amin'ireo sela teo aloha.
<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>
akany
Ny fomba sisintany, ny fomba mavitrika, ary ny variana latabatra dia tsy lovain'ny latabatra misy akany.
Mba hisorohana ny fomba tsy hivoaka amin'ny latabatra misy akany, dia mampiasa ny mpifantina child combinator ( >) ao amin'ny CSS-nay. Koa satria mila mikendry ny tds sy ths rehetra ao amin'ny thead, tbody, ary tfootny , ny mpifidy antsika dia mety ho lava be raha tsy misy izany. Noho izany, mampiasa ny mpifidy toa hafahafa izahay .table > :not(caption) > * > *mba hikendry ny tds sy ths rehetra amin'ny .table, saingy tsy misy na iray aza amin'ireo latabatra misy akany.
Mariho fa raha manampy <tr>s ho zanaka mivantana amin'ny latabatra ianao, <tr>dia hofonosina amin'ny <tbody>alàlan'ny default ireo, ka mahatonga ny mpifidy hiasa araka ny tokony ho izy.
Anatomy
Loha latabatra
Mitovy amin'ny latabatra sy ny latabatra maizina, ampiasao ny kilasy modifier .table-lightna .table-darkmba hahatonga ny <thead>s ho maivana na maizina.
A <caption>miasa toy ny lohatenin'ny latabatra. Izy io dia manampy ireo mpampiasa manana mpamaky efijery mba hahita latabatra sy hahatakatra ny momba azy ary hanapa-kevitra raha te hamaky izany izy ireo.
Lisitry ny mpampiasa
#
VOALOHANY
FARANY
tahony
1
marika
Otto
@mdo
2
Jakoba
Thornton
@matavy
3
Larry the Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Azonao atao ihany koa ny mametraka ny <caption>ambony latabatra miaraka amin'ny .caption-top.
Lisitry ny mpampiasa
#
VOALOHANY
FARANY
tahony
1
marika
Otto
@mdo
2
Jakoba
Thornton
@matavy
3
Larry
ny Vorona
@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>
Tabilao mandray andraikitra
Ny tabilao mandray andraikitra dia ahafahan'ny tabilao mihodina mitsivalana mora foana. Ataovy mamaly ny latabatra rehetra manerana ny viewports rehetra amin'ny alàlan'ny fametahana .tableny .table-responsive. Na, mifidiana teboka fiatoana ambony indrindra ahafahana manana latabatra mandray andraikitra amin'ny fampiasana .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Fampitahana / fanapahana mitsangana
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
These tables may appear broken until their responsive styles apply at specific viewport widths.
Ny variables factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) dia ampiasaina hamaritana ny fifanoherana amin'ny variants table.
Ankoatra ireo variana latabatra maivana & maizina, ny loko lohahevitra dia hazavain'ny $table-bg-levelfari-piainana.