Nwoma ne nhwɛsoɔ a ɛfa opt-in styling of tables (esiane sɛ wɔde di dwuma abu so wɔ JavaScript plugins mu nti) ne Bootstrap.
Wɔ kratafa yi so
Nsɛm a Wɔaka abom
Esiane sɛ wɔde nneɛma di dwuma kɛse wɔ <table>widget ahorow a ɛto so abiɛsa te sɛ kalenda ne date pickers so nti, Bootstrap no pon ahorow no yɛ opt-in . Fa base class .tableno ka biara ho <table>, afei fa yɛn optional modifier classes anaa custom styles no trɛw mu. Table styles nyinaa nnya nnyi awo wɔ Bootstrap mu, a ɛkyerɛ sɛ wobetumi ayɛ nested tables biara a ɛde ne ho afi ɔwofo no ho.
Sɛ wode table markup a ɛyɛ mfitiaseɛ paa di dwuma a, ɛha na .table-gyina tables hwɛ wɔ Bootstrap mu.
# .
Deɛ ɛdi kan
Twa toɔ
Di ho dwuma
1. 1.
Marko
Otto na ɔkyerɛwee
@mdo na ɔkyerɛwee
2. 2.
Yakob
Thornton na ɔkyerɛwee
@kɛseɛ
3. 3
Larry Anomaa no
@twitter so
<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>
Nsonsonoe ahorow
Fa nsɛm a ɛfa ho adesua ahorow di dwuma de kɔla pon, pon row anaa nkwammoaa ankorankoro.
Klaase
Asɛmti
Asɛmti
Mfiaseɛ
Nnaduafie
Nnaduafie
Mfiaseɛ
Nnaduafie
Nnaduafie
Nea ɛto so abien
Nnaduafie
Nnaduafie
Nkunimdie
Nnaduafie
Nnaduafie
Ɔhaw a ɛbɛtumi aba
Nnaduafie
Nnaduafie
Kɔkɔbɔ
Nnaduafie
Nnaduafie
Info
Nnaduafie
Nnaduafie
Kanea
Nnaduafie
Nnaduafie
Sum
Nnaduafie
Nnaduafie
<!-- 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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.
Nnwom a wɔde nnyigyei nkyerɛwde ahyɛ mu
Ntrɛwmu a ɛwɔ nsensanee
Fa di dwuma .table-stripedde zebra-striping ka table row biara a ɛwɔ <tbody>.
# .
Deɛ ɛdi kan
Twa toɔ
Di ho dwuma
1. 1.
Marko
Otto na ɔkyerɛwee
@mdo na ɔkyerɛwee
2. 2.
Yakob
Thornton na ɔkyerɛwee
@kɛseɛ
3. 3
Larry Anomaa no
@twitter so
<tableclass="table table-striped">
...
</table>
Wobetumi nso de saa adesua ahorow yi aka table variants ho:
Yɛhyɛ aseɛ denam table cell bi akyi a yɛde --bs-table-bgcustom property no besi hɔ no so. Afei table variants nyinaa hyehyɛ saa custom property no ma ɛyɛ table cells no kɔla. Saa kwan yi so no, sɛ wɔde kɔla ahorow a ɛyɛ fã bi a ɛyɛ mmerɛw di dwuma sɛ pon akyi mfonini a, yɛrenkɔ ɔhaw mu.
Afei yɛde inset box shadow ka table cells no so a box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer wɔ biara a wɔakyerɛ no atifi background-color. Esiane sɛ yɛde spread kɛse bi di dwuma na yenni blur nti, kɔla no bɛyɛ monotone. Esiane sɛ --bs-table-accent-bgɛyɛ unset by default nti, yenni default box shadow.
Sɛ wɔde .table-striped, .table-hoveranaa .table-activeadesua ahorow bi ka ho a, wɔde the --bs-table-accent-bgno si kɔla a ɛyɛ fã bi so de yɛ kɔla a ɛwɔ akyi no.
Wɔ table variant biara ho no, yɛyɛ --bs-table-accent-bgkɔla a ɛwɔ nsonsonoe a ɛkorɔn sen biara a egyina saa kɔla no so. Sɛ nhwɛso no, accent color for .table-primaryno yɛ tuntum bere .table-darka ɛwɔ accent kɔla a ɛyɛ hare no.
Wɔayɛ nsɛm ne hye so kɔla ahorow no ɔkwan koro no ara so, na wɔn kɔla ahorow no yɛ nea wonya fi awo mu default so.
Table cells of <thead>no yɛ bere nyinaa vertical aligned to ase. Table cells wɔ <tbody>inherit wɔn alignment fi <table>na wɔde aligned to the the top by default. Fa vertical align classes no di dwuma fa san hyɛ baabi a ɛho hia.
Asɛmti 1
Asɛmti 2
Asɛmti 3
Asɛmti 4
Saa nkwammoaa yi nya agyapadevertical-align: middle; fi pon no so
Saa nkwammoaa yi nya agyapadevertical-align: middle; fi pon no so
Saa nkwammoaa yi nya agyapadevertical-align: middle; fi pon no so
Eyi ha yɛ beae a wɔde hyɛ mu nsɛm bi, a wɔayɛ sɛ ɛbɛfa baabi a ɛda hɔ kakra, de akyerɛ sɛnea gyinabea a wɔde gyina hɔ no yɛ adwuma wɔ nkwammoaa a edi eyi anim no mu.
Saa nkwammoaa yi nya agyapadevertical-align: bottom; fi table row no mu
Saa nkwammoaa yi nya agyapadevertical-align: bottom; fi table row no mu
Saa nkwammoaa yi nya agyapadevertical-align: bottom; fi table row no mu
Eyi ha yɛ beae a wɔde hyɛ mu nsɛm bi, a wɔayɛ sɛ ɛbɛfa baabi a ɛda hɔ kakra, de akyerɛ sɛnea gyinabea a wɔde gyina hɔ no yɛ adwuma wɔ nkwammoaa a edi eyi anim no mu.
Saa nkwammoaa yi nya agyapadevertical-align: middle; fi pon no so
Saa nkwammoaa yi nya agyapadevertical-align: middle; fi pon no so
Saa nkwammoaa yi hyia wɔ soro hɔ.
Eyi ha yɛ beae a wɔde hyɛ mu nsɛm bi, a wɔayɛ sɛ ɛbɛfa baabi a ɛda hɔ kakra, de akyerɛ sɛnea gyinabea a wɔde gyina hɔ no yɛ adwuma wɔ nkwammoaa a edi eyi anim no mu.
<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 a wɔde yɛ buw
Border styles, active styles, ne table variants no, ɛnyɛ nested tables no nnya agyapadeɛ.
Sɛnea ɛbɛyɛ a style biara rentu nkɔ nested tables so no, yɛde child combinator ( >) selector no di dwuma wɔ yɛn CSS no mu. Esiane sɛ ɛsɛ sɛ yɛde yɛn ani si tds ne ths a ɛwɔ thead, tbody, ne , no nyinaa so tfootnti, yɛn selector no bɛyɛ tenten fɛfɛɛfɛ sɛ enni hɔ a. Sɛnea ɛte no, yɛde rather odd looking .table > :not(caption) > * > *selector no di dwuma de de yɛn ani si tds ne ths nyinaa so wɔ .table, nanso ɛnyɛ nested table biara a ebetumi aba no mu biara.
Hyɛ no nsow sɛ sɛ wode <tr>s ka ho sɛ pon bi mma tẽẽ a, wɔbɛkyekyere wɔn <tr>no wɔ a <tbody>mu default so, na ɛnam so ama yɛn selectors no ayɛ adwuma sɛnea wɔahyɛ da ayɛ no.
Anatomy ho nimdeɛ
Table ti
Te sɛ tables ne tables tuntum no, fa modifier classes no di dwuma .table-lightanaasɛ .table-darkma <thead>s nyɛ hann anaa tuntum gray.
A <caption>yɛ adwuma te sɛ asɛmti a wɔde kyerɛ pon bi. Ɛboa wɔn a wɔde di dwuma a wɔwɔ screen readers no ma wonya pon na wɔte nea ɛfa ho ase na wosi gyinae sɛ wɔpɛ sɛ wɔkenkan anaa.
Kyerɛw wɔn a wɔde di dwuma no din
# .
Deɛ ɛdi kan
Twa toɔ
Di ho dwuma
1. 1.
Marko
Otto na ɔkyerɛwee
@mdo na ɔkyerɛwee
2. 2.
Yakob
Thornton na ɔkyerɛwee
@kɛseɛ
3. 3
Larry Anomaa no
@twitter so
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Wubetumi nso de nea <caption>ɛwɔ pon no atifi no ahyɛ .caption-top.
Kyerɛw wɔn a wɔde di dwuma no din
# .
Deɛ ɛdi kan
Twa toɔ
Di ho dwuma
1. 1.
Marko
Otto na ɔkyerɛwee
@mdo na ɔkyerɛwee
2. 2.
Yakob
Thornton na ɔkyerɛwee
@kɛseɛ
3. 3
Larry na ɔkyerɛwee
Anomaa no
@twitter so
<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>
Nnwom a wɔde bua nsɛm
Table ahorow a ɛyɛ mmuae ma wotumi twetwe table ahorow no tẽẽ a ɛnyɛ den. Ma pon biara nyɛ adwuma wɔ viewports nyinaa so denam a wode bɛkyekyere .tableso .table-responsive. Anaasɛ, paw breakpoint a ɛsen biara a wode benya pon a ɛyɛ mmuae denam .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertical clipping/twitwa mu
Responsive tables make use of overflow-y: hidden, a ɛtwitwa nsɛm biara a ɛkɔ akyiri sen table no ase anaa atifi anoano. Titiriw no, eyi betumi atwitwa dropdown menus ne afoforo widgets afoforo so.
Bere nyinaa yɛ aso
Wɔ breakpoint biara mu no, fa di dwuma .table-responsivema pon ahorow a ɛrekɔ soro no.
Fa di dwuma .table-responsive{-sm|-md|-lg|-xl|-xxl}sɛnea ɛho hia de yɛ mmuae pon ahorow kosi breakpoint pɔtee bi. Efi saa breakpoint no ne soro no, pon no bɛyɛ n’ade sɛnea ɛsɛ na ɛrentwetwe nkɔ soro.
Saa tables yi betumi ayɛ te sɛ nea abubu kosi sɛ wɔn mmuae kwan ahorow no bedi dwuma wɔ viewport ntrɛwmu pɔtee bi mu.