Source

Tablas

Documentación chaymanta ejemplokuna opt-in estilo tablakuna kaqpaq (JavaScript plugins kaqpi prevalente llamk'aynin qusqa) Bootstrap kaqwan.

Ejemplos

Tablakuna mast'arisqa llamk'achisqanrayku kimsa kaq widgetkunantinpi calendariokuna chaymanta p'unchaw akllaqkuna hina, tablakunayku ruwasqayku opt-in kananpaq . Yanapakuylla base clase .tablemayqin kaqmanpas <table>, chaymanta mast'ariy sapanchasqa estilokunawan utaq imaymana yapasqa tikraq claseykuwan.

Aswan sapaq tabla markachayta llamk'achispa, kaypi imayna .table-sapanchasqa tablakuna Bootstrap kaqpi rikukunku. Llapan tabla estilokuna Bootstrap 4 kaqpi herenciasqa kanku , niyta munan mayqin anidado tablakuna tayta mama hina estilochasqa kanqa.

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Chaymantapas colorkunatan tikrawaq —yana fondokunapi k’anchariq qelqakunawan— .table-dark.

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Mesa uma akllanakuna

Tablakunaman chaymanta yana tablakunaman rikch'akuq, tikraq clasekunata llamk'achiy utaq .thead-lights llimp'i utaq yana gris rikhurinanpaq..thead-dark<thead>

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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 Pisqu @twitter nisqapi 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Mesa bordeada

.table-borderedTablapa tukuy ladunpi, celdakunapipas fronterakunapaq yapay .

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Mesa sin frontera

.table-borderlessMana fronterayuq mesapaq yapay .

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlessyana mesakunapipas servichikunmanmi.

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hoverable nisqa filakuna

Huk . .table-hover_<tbody>

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Uchuy mesa

.table-smMesakuna aswan compacta kananpaq yapay , celda acolchadota kuskanman kuchuspa.

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Clases contextuales nisqa

Contextual clasekunata llamk'achiy tabla filakunata utaq sapa celdakunata llimp'inaykipaq.

Yachakuna Uma Uma
Kawsaq Pukullu Pukullu
Ñ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 rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Sapa kuti tabla qhipa variantes mana yana tablawan kanchu, chaywanpas, qillqa utaq qhipa yanapakuykunata llamk'achiy atikunki rikch'aq estilokuna aypanaykipaq.

# . Uma Uma
1. Pukullu Pukullu
2. Pukullu Pukullu
3. Pukullu Pukullu
4. Pukullu Pukullu
5. Pukullu Pukullu
6. Pukullu Pukullu
7. Pukullu Pukullu
8. Pukullu Pukullu
9. 9.1 Pukullu Pukullu 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyclasewan pakasqa.

Kutichiq tablakunata ruway mayqintapas .table,wan p'istuykuspa .table-responsive{-sm|-md|-lg|-xl}, tablata sapa p'akiypi horizontalta kuyuchiyta ruwaspa max-width576px, 768px, 992px chaymanta 1120px kaqkama (ichaqa mana churaspachu), chaymanta.

Reparay chaymanta maskaqkuna mana kunan yanapankuchu rango contexto tapuykunata , llamk'ayku muyuriqninpi limitaciones kaqmanta min-chaymanta max-prefijos kaqmanta chaymanta qhaway punkukuna fraccional anchos kaqwan (mayqinkuna wakin condicionkunapi ruwakunman alto-dpi dispositivokunapi, kayhina) chanikuna aswan precisión kaqwan kay tupachiykunapaq llamk'achispa .

Capciones nisqakuna

A <caption>nisqaqa huk tablapaq umalliq hinam llamkan. Yanapakun pantalla ñawiriqkunawan llamk'aqkunata huk tabla tarinankupaq chaymanta entiendenankupaq imamanta chaymanta tanteanankupaq sichus ñawiriyta munanku.

Lista de usuarios
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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}.

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.

Sapa kuti kutichiq

Sapa pakiy chimpapi, .table-responsivetablakuna horizontalta kuyuchinapaq llamk'achiy.

# . Uma Uma Uma Uma Uma Uma Uma Uma Uma
1. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
2. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
3. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Punto de ruptura específico nisqa

.table-responsive{-sm|-md|-lg|-xl}Huk rakinakama kutichiq tablakuna ruwanapaq necesitasqanmanhina llamk'achiy . Chay pakiymanta chaymanta wichayman, tabla normalta comportakunqa manataq horizontalta kuyuchinqachu.

Kay tablakuna p'akisqa rikhurinman kutichiq estilokuna sapanchasqa qhaway punku anchokunapi ruwakunankama.

# . Uma Uma Uma Uma Uma Uma Uma Uma
1. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
2. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
3. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# . Uma Uma Uma Uma Uma Uma Uma Uma
1. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
2. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
3. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# . Uma Uma Uma Uma Uma Uma Uma Uma
1. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
2. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
3. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# . Uma Uma Uma Uma Uma Uma Uma Uma
1. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
2. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu
3. Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu Pukullu 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>