Aswan sapaq tabla markachayta llamk'achispa, kaypi imayna .table-sapanchasqa tablakuna Bootstrap kaqpi rikukunku.
# .
Ñawpaq
Qipa
Hapina
1.
Marcos
Otto
@mdo nisqa
2.
Jacob
Thornton sutiyuq
@wira
3.
Larry chay P'isqu
@twitter nisqapi
<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>
Variantes
Contextual clasekunata llamk'achiy tablakunata, tabla filakunata utaq sapa celdakunata llimp'inaykipaq.
Yachakuna
Uma
Uma
Ñawpaqchasqa
Pukullu
Pukullu
Qallariq
Pukullu
Pukullu
Secundaria
Pukullu
Pukullu
Allinmi
Pukullu
Pukullu
Manchay
Pukullu
Pukullu
Manchachiy
Pukullu
Pukullu
Info
Pukullu
Pukullu
Kanchi
Pukullu
Pukullu
Tutayasqa
Pukullu
Pukullu
<!-- 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>
Yanapakuq tecnologiakunaman significadota apachiy
Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .visually-hiddenclasewan pakasqa.
Tablas acentadas
Rayayuq filakuna
.table-stripedIma tabla filamanpas zebra-rayado nisqa yapanapaq llamk'achiy <tbody>.
# .
Ñawpaq
Qipa
Hapina
1.
Marcos
Otto
@mdo nisqa
2.
Jacob
Thornton sutiyuq
@wira
3.
Larry chay P'isqu
@twitter nisqapi
<tableclass="table table-striped">
...
</table>
Kay clasekuna tabla variantes kaqkunamanpas yapasqa kanman:
Qallarinchikmi huk tabla celdapa qipanpi churaspa, --bs-table-bgsapanchasqa propiedadwan. Llapan tabla variantes chaymanta chay sapanchasqa propiedad churanku tabla celdakuna colorizananpaq. Kayhina, mana sasachakuyman yaykuykuchu sichus kuskan sut'i llimp'ikuna tabla qhipa hina llamk'achisqa kanku.
Chaymanta yapayku huk inset caja llantuyta tabla celdakunapi box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to capawan mayqin nisqapa hawanpi background-color. Imaraykuchus huk hatun mast’ariyta llamk’achinchik chaymanta mana difuminación kaqwan, chay colorqa monotono kanqa. Ñawpaqmanta --bs-table-accent-bgmana churasqa kasqanrayku, mana ñawpaqmanta churasqa qutu llantuyuqchu kayku.
Sapa tabla variantepaq, huk --bs-table-accent-bgcolorta ruwayku aswan hatun contrasteyuq chay colormanta hina. Ejemplopaq, para el color de acento .table-primaryes más oscuro mientras .table-darkque tiene un color de acento más claro.
Tabla celulas de <thead>siempre son verticales alineadas al abajo. Tabla celdakuna in <tbody>herencian paykunaq chiqanchayninkumanta <table>chaymanta chiqanchasqa kanku chaymanta chay pataman ñawpaqmanta. Sayaq chiqanchay clasekunata llamk'achiy maypichus necesitakun chaypi wakmanta chiqanchay.
Uma 1.1
Umalliq 2
Uma 3.1
Uma 4.1
Kay celdaqa vertical-align: middle;tablamanta herenciata chaskikun
Kay celdaqa vertical-align: middle;tablamanta herenciata chaskikun
Kay celdaqa vertical-align: middle;tablamanta herenciata chaskikun
Kay kaypi wakin tiyana qillqa, allin sayaq espaciota hap'inapaq yuyasqa, ñawpaq celdakunapi sayaq chiqanchay imayna llamk'an chayta rikuchinapaq.
Kay celdaqa vertical-align: bottom;tabla filamanta herenciata chaskikun
Kay celdaqa vertical-align: bottom;tabla filamanta herenciata chaskikun
Kay celdaqa vertical-align: bottom;tabla filamanta herenciata chaskikun
Kay kaypi wakin tiyana qillqa, allin sayaq espaciota hap'inapaq yuyasqa, ñawpaq celdakunapi sayaq chiqanchay imayna llamk'an chayta rikuchinapaq.
Kay celdaqa vertical-align: middle;tablamanta herenciata chaskikun
Kay celdaqa vertical-align: middle;tablamanta herenciata chaskikun
Kay celdaqa pataman chiqanchasqa kachkan.
Kay kaypi wakin tiyana qillqa, allin sayaq espaciota hap'inapaq yuyasqa, ñawpaq celdakunapi sayaq chiqanchay imayna llamk'an chayta rikuchinapaq.
<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>
Nido
Fronte estilokuna, ruwaq estilokuna chaymanta tabla variantes mana anidado tablakuna herenciasqachu kanku.
Ima estilokuna anidado tablakunaman mana lluqsinanpaq, CSS nisqaykupi wawa huñuq ( )> akllanata llamk'achiyku. Ya que necesitamos apuntar todos los tds y ths en los thead, tbody, y tfoot, nuestro selector sería bastante largo sin ella. Chayhina, aswan impar qhaway .table > :not(caption) > * > *akllanata llamk'achiyku llapa tds chaymanta ths kaqmanta .table, ichaqa mana mayqinpas mayqin anidado tablakuna atiyniyuq kaqmanta.
Reparay sichus <tr>s huk tablamanta chiqan wawankuna hina yapanki, chaykuna <tr>huk kaqpi p'istuykusqa kanqa <tbody>ñawpaqmanta, chayhina akllanayku llamk'ayta munasqa hina.
Anatomía
Mesa uma
Tablakunaman chaymanta yana tablakunaman rikch'akuq, tikraq clasekunata llamk'achiy utaq .table-lights llimp'i utaq yana gris rikhurinanpaq..table-dark<thead>
<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>
Tablas respuestas
Tablakuna kutichiqmi tablakunata mana sasachakuspalla horizontalta kuyuchiyta atin. Ima tablatapas llapa qhawanakunapi kutichiq ruway .tablehukwan p'istuykuspa .table-responsive. Utaq, huk hatun ruphay puntota akllay mayqinwanchus huk kutichiq tablayuq kanki chaykama llamk'achispa .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Recorte/truncación vertical nisqa
Tablakuna kutichiq ruwanku llamk'achiyta overflow-y: hidden, mayqinchus ima contenidotapas tabla urapi utaq pata kantukunamanta aswan karuman riqmanta k'utun. Aswanta, kayqa urayk'aq menúkuna chaymanta wak kimsa kaq widgetkuna k'utuyta atin.
Chay factor variables ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) nisqakunam churakun chay contraste nisqa tarinapaq chay variantes de tabla nisqapi.
Aparte de las variantes de mesa de luz & oscura, los colores de tema son ligero por la $table-bg-levelvariable.