Bootstrap hmanga table-te opt-in styling (JavaScript plugin-a an hman tam dan ngaihtuah chuan) documentation leh entirnan.
He page ah hian
A tlangpuiin
Calendar leh date picker ang chi third-party widget hrang hranga element hman tam tak avang hian <table>Bootstrap-a table-te chu opt-in a ni . Base class .tablechu any -ah dah la <table>, chutah chuan kan optional modifier class emaw custom style emaw hmangin extend rawh. Table style zawng zawng hi Bootstrap ah hian inherited a ni lo a, chu chu nested table eng pawh chu parent atanga innghat lovin style theih a ni tihna a ni.
Table markup bulpui ber hmangin, .tableBootstrap-a -based tables awm dan chu hetiang hi a ni.
# a ni.
Hmasa ber
Hnuhnung ber
Chelh
1. a ni
Mark
Otto chuan a ti a
@mdo a ni
2. 2.
Jakoba chu a ni
Thornton-a chuan a ti a
@thau
3. A ni
Larry chuan a ti a
@twitter ah a awm
<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 te pawh a awm
Table, table row emaw cell pakhat zel emaw color siam nan contextual class hmang thin ang che.
Pawl
Heading tih a ni
Heading tih a ni
Hlawhchhamna
Pindan
Pindan
Hmasa ber
Pindan
Pindan
Secondary lam a ni
Pindan
Pindan
Hlawhtling
Pindan
Pindan
Hlauhawm
Pindan
Pindan
Vaulawkna
Pindan
Pindan
Info
Pindan
Pindan
Eng
Pindan
Pindan
Thim
Pindan
Pindan
<!-- 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>
Assistive technology-te hnena awmzia thlentu
awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.
Accented table te pawh a awm
Striped row hrang hrang a awm
.table-stripedA chhunga table row eng pawhah zebra-striping dah belh nan hmang ang che <tbody>.
# a ni.
Hmasa ber
Hnuhnung ber
Chelh
1. a ni
Mark
Otto chuan a ti a
@mdo a ni
2. 2.
Jakoba chu a ni
Thornton-a chuan a ti a
@thau
3. A ni
Larry chuan a ti a
@twitter ah a awm
<tableclass="table table-striped">
...
</table>
Heng class te hi table variant ah te pawh dah theih a ni:
Table cell pakhat background chu --bs-table-bgcustom property hmangin kan set tan a. Chumi hnuah chuan table variant zawng zawng chuan chu custom property chu table cells te colorize turin an set vek a. Hetiang hian semi-transparent color te chu table background atan hman a nih chuan harsatna kan tawk lo.
Tichuan table cells ah inset box shadow kan dah a, box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer kan dah a, chu chu eng specified ah pawh kan dah a background-colorni. Spread lian tak leh blur kan hman loh avangin a rawng chu monotone a ni ang. Atang khan--bs-table-accent-bg default box shadow kan nei lo.
Either .table-striped, .table-hoveremaw .table-activeclass te dah a nih chuan, the --bs-table-accent-bgchu semitransparent color-ah dahin background colorize a ni.
Table variant tin atan chuan --bs-table-accent-bgchu color a zirin contrast sang ber color kan siam thin. Entirnan, accent color for .table-primarychu a dum zawk laiin .table-darkaccent color lighter zawk a nei thung.
Text leh border color te chu a inang vek a, an color te chu default in inherited a ni.
Table cells of <thead>te chu a hnuai lam hawiin vertical aligned an ni fo thin. Table cell te hian <tbody>an alignment chu an inherit <table>a, default in the top ah an align thin. A tulna hmunah re-align turin vertical align class te hmang ang che .
Thupui 1-na a ni
Thupui 2-na
Thupui 3-na
Thupui 4-na a ni
He cell hian vertical-align: middle;table atang hian a inherit thin
He cell hian vertical-align: middle;table atang hian a inherit thin
He cell hian vertical-align: middle;table atang hian a inherit thin
Hetah hian placeholder text thenkhat, vertical space tlemte luah tura ruahman, a hmaa cell-a vertical alignment hnathawh dan entir nan a ni.
He cell hian vertical-align: bottom;table row atang hian a inherit thin
He cell hian vertical-align: bottom;table row atang hian a inherit thin
He cell hian vertical-align: bottom;table row atang hian a inherit thin
Hetah hian placeholder text thenkhat, vertical space tlemte luah tura ruahman, a hmaa cell-a vertical alignment hnathawh dan entir nan a ni.
He cell hian vertical-align: middle;table atang hian a inherit thin
He cell hian vertical-align: middle;table atang hian a inherit thin
He cell hi a chung lamah a inrem a.
Hetah hian placeholder text thenkhat, vertical space tlemte luah tura ruahman, a hmaa cell-a vertical alignment hnathawh dan entir nan a ni.
<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>
Nesting tih a ni
Border style, active style, leh table variant te hi nested table te hian an inherit lo.
Nested table-a style eng pawh leak loh nan >kan CSS-ah hian child combinator ( ) selector kan hmang a. , , leh -a tds leh s zawng zawng kan target vek a ngai avangin kan selector chu a tel lo chuan a sei hle ang. Chutiang a nih avang chuan, a s leh s zawng zawng target turin rather odd looking selector kan hmang a , mahse potential nested table pakhat mah kan target lo.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>Table pakhata direct child anga s i dah chuan chu chu default <tr>-in a-ah a wrapped ang tih hre reng ang che <tbody>, chutiang chuan kan selector-te chu a tum angin a thawk thei ang.
Anatomy tih a ni
Table lu a ni
Table leh dark table ang bawkin modifier class .table-lightemaw .table-darkhmang la, <thead>s chu light emaw dark gray emaw angin a lang thei ang.
A <caption>hian table pakhata heading ang maiin a thawk a. Screen reader neitute chu table zawng chhuakin a chungchang an hriatthiam theih nan leh chhiar duh leh duh loh an rel theih nan a pui a ni.
A hmangtute list
# a ni.
Hmasa ber
Hnuhnung ber
Chelh
1. a ni
Mark
Otto chuan a ti a
@mdo a ni
2. 2.
Jakoba chu a ni
Thornton-a chuan a ti a
@thau
3. A ni
Larry chuan a ti a
@twitter ah a awm
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<caption>Table chung lamah pawh .caption-top.
A hmangtute list
# a ni.
Hmasa ber
Hnuhnung ber
Chelh
1. a ni
Mark
Otto chuan a ti a
@mdo a ni
2. 2.
Jakoba chu a ni
Thornton-a chuan a ti a
@thau
3. A ni
Larry chuan a ti a
chu Sava chu a ni
@twitter ah a awm
<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>
Chhanna pe thei table te
Responsive table hmang hian awlsam takin table te chu horizontal-a scroll theih a ni. Viewport zawng zawngah table eng pawh responsive turin siam la, a .tablewith wrapping hmangin siam rawh .table-responsive. A nih loh leh, responsive table neih theihna tur breakpoint tam ber thlang la, hmangin .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertical clipping/truncation tih a ni
Responsive tables make use of overflow-y: hidden, chu chuan table hnuai lam emaw, chunglam emaw atanga chhuak content eng pawh a clip off thin. A bik takin hei hian dropdown menu leh third-party widget dangte a clip off thei a ni.
A chhang let fo thin
Breakpoint tinah, .table-responsivetable horizontal-a scroll nan hmang ang che.
Hmang.table-responsive{-sm|-md|-lg|-xl|-xxl}Breakpoint bik thlenga responsive table siam nan a tul anginChu breakpoint atang chuan a chung lam atang chuan table chu a awm dan pangngaiin a awm ang a, horizontal-in a scroll lo vang.
Heng table te hi an responsive style te chu viewport width bik a apply hma loh chuan broken angin a lang thei.
Factor variable te chu ( $table-striped-bg-factor, $table-active-bg-factor& 1000) a ni.$table-hover-bg-factorTable variant-a contrast awm dan hriat nan
Light & dark table variant tih lohah chuan theme color te hi $table-bg-levelvariable hian a ti light zawk bawk.