Source

Tabla-kuéra rehegua

Kuatiahaipyre ha techapyrã opt-in estilo taꞌãngamýi rehegua (oñemeꞌe rupi ijepuru jepi JavaScript plugins-pe) Bootstrap ndive.

Tembiecharã

Ojeporúgui hetaiterei taꞌãngamýi mbohapýha mbaꞌekuaarã rupive haꞌeháicha arapapaha ha ára jeporavoha, rojapo ore kuatiarogue ojeporavo hag̃ua . Emoĩnte pe clase base .tableoimeraẽvape <table>, upéi embohape estilo personalizado reheve térã ñande opáichagua clase modificador oikeva’ekue reheve.

Oipurúvo cuadro marcado iñepyrũrãvéva, ko’ápe ojehecha mba’éichapa .tableojehecha umi tabla -based Bootstrap-pe. Opaite tabla estilo ojehereda Bootstrap 4 -pe , heꞌiséva oimeraẽva tabla anidado oñemboguapytaha peteĩchaite túvaicha.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe 
<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>

Ikatu avei reinverti umi kolór —téxto tesape reheve umi fondo iñypytũvape— .table-dark.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe 
<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>

Opciones de cabeza de mesa rehegua

Ojogua umi cuadro ha cuadro iñypytũvape, eipuru umi clase modificador .thead-lighttérã .thead-darkejapo hag̃ua <thead>s ojehechauka gris tesape térã iñypytũva.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe
# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe 
<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>

Filas rayadas rehegua

Eipuru .table-stripedemoĩ hag̃ua zebra-rayado oimeraẽva mesa vore ryepýpe <tbody>.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe 
<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>
# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe 
<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 frontera rehegua

Oñemoĩve .table-borderedumi borde-pe g̃uarã opaite lado cuadro ha celdakuérape g̃uarã.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry pe Guyra @twitter-pe 
<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>
# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry pe Guyra @twitter-pe 
<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>

Filas hoverables rehegua

Oñembojoapy .table-hoverojehechauka hag̃ua peteĩ estado hover umi vore vore rehegua peteĩ <tbody>.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry pe Guyra @twitter-pe 
<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>
# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry pe Guyra @twitter-pe 
<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>

Mesa michĩva

Oñemoĩve .table-smojejapo haguã umi mesa compactavéva oñeikytĩvo acolchado celular mbytépe.

# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry pe Guyra @twitter-pe 
<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>
# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry pe Guyra @twitter-pe 
<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>

Umi mbo’esyry contextual rehegua

Eipuru clase contextual embojegua hag̃ua umi fila tabla térã celda peteĩteĩva.

Mbo'ehakoty Ñe’ẽryru Ñe’ẽryru
Kyre'ỹ Koty'i Koty'i
Upevakuére Koty'i Koty'i
Tenondeguáva Koty'i Koty'i
Mokõiha Koty'i Koty'i
Ñesẽporã Koty'i Koty'i
Ñemongyhyje Koty'i Koty'i
Ñemongyhyje Koty'i Koty'i
Info Koty'i Koty'i
Tesakã Koty'i Koty'i
Pytũ Koty'i Koty'i 
<!-- 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>

Umi variante vore rapykuere jepigua ndojeguerekói mesa iñypytũva ndive, jepémo upéicha, ikatu reipuru jehaipyre térã tapykuehoha purupyrã rehupyty hag̃ua estilo ojoguáva.

# Ñemby Ñe’ẽryru Ñe’ẽryru
1. 1.1 Koty'i Koty'i
2. 2.1 Koty'i Koty'i
3.1 Koty'i Koty'i
4 rehegua Koty'i Koty'i
5 rehegua Koty'i Koty'i
6 rehegua Koty'i Koty'i
7 rehegua Koty'i Koty'i
8 rehegua Koty'i Koty'i
9 rehegua Koty'i Koty'i 
<!-- 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>
Ombohasávo he’iséva umi tecnología oipytyvõvape

Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .sr-onlymboꞌepy ndive.

Ejapo umi cuadro ombohováiva embojere rupi oimeraẽva .table, .table-responsive{-sm|-md|-lg|-xl}ejapóvo pe cuadro ojedesplaza horizontalmente peteĩteĩva max-widthpunto de ruptura-pe (ha katu ndoikéiva) 576px, 768px, 992px ha 1120px peve, peteĩteĩ.

Eñamindu’u umi kundahára ndoipytyvõigui ko’áĝaite umi consulta contexto rango rehegua , romba’apo umi limitación min-ha max-prefijo ha jehechaukaha orekóva ancho fraccionario rehe (ikatúva oiko ciertas condiciones-pe umi dispositivo dpi yvateguápe, techapyrãramo) roipurúvo valor orekóva precisión yvatevéva ko’ã ñembojojarãme g̃uarã .

Umi leyenda

A <caption>ombaꞌapo peteĩ iñakãrapuꞌaicha peteĩ cuadro-pe g̃uarã. Oipytyvõ puruhárape orekóva pantalla moñe’ẽhára ojuhu hag̃ua peteĩ mesa ha oikuaa hag̃ua mba’érehepa oñe’ẽ ha odesidi omoñe’ẽsépa.

Umi puruhára lista
# Ñemby Peteĩha Paha Ipoguýpe oĩva
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe 
<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>

Umi cuadro ombohováiva

Umi cuadro ombohováiva oheja ojedesplaza hag̃ua umi cuadro horizontalmente ndahasýiva. Ejapo oimeraẽva mesa ombohovái hag̃ua opaite jehechaukaha rupi embojere peteĩ .tablendive .table-responsive. Térã, eiporavo peteĩ punto de ruptura máximo hendive oguereko hag̃ua peteĩ cuadro ombohováiva oipurúvo .table-responsive{-sm|-md|-lg|-xl}.

Recorte/truncación vertical rehegua

Umi cuadro ombohováiva oipuru overflow-y: hidden, oikytĩva oimeraẽ contenido ohasáva mesa guy térã yvate gotyo. En particular, kóva ikatu oikytĩ umi menú desplegable ha ambue widget mbohapýha.

Akóinte ombohováiva

Opaite punto de ruptura rupi, eipuru .table-responsiveumi cuadro ojedesplaza hag̃ua horizontalmente.

# Ñemby Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru
1. 1.1 Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i
2. 2.1 Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i
3.1 Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i Koty'i 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Punto de ruptura específico rehegua

Eipuru .table-responsive{-sm|-md|-lg|-xl}tekotevẽháicha emoheñói hag̃ua cuadro ombohováiva peteĩ punto de ruptura particular peve. Upe punto de ruptura guive ha yvate gotyo, pe cuadro oñekomporta vaꞌerã normalmente ha ndojedesplazamoꞌãi horizontalmente.

# Ñemby Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru
1. 1.1 Koty'i Koty'i Koty'i Koty'i Koty'i
2. 2.1 Koty'i Koty'i Koty'i Koty'i Koty'i
3.1 Koty'i Koty'i Koty'i Koty'i Koty'i
# Ñemby Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru
1. 1.1 Koty'i Koty'i Koty'i Koty'i Koty'i
2. 2.1 Koty'i Koty'i Koty'i Koty'i Koty'i
3.1 Koty'i Koty'i Koty'i Koty'i Koty'i
# Ñemby Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru
1. 1.1 Koty'i Koty'i Koty'i Koty'i Koty'i
2. 2.1 Koty'i Koty'i Koty'i Koty'i Koty'i
3.1 Koty'i Koty'i Koty'i Koty'i Koty'i
# Ñemby Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru Ñe’ẽryru
1. 1.1 Koty'i Koty'i Koty'i Koty'i Koty'i
2. 2.1 Koty'i Koty'i Koty'i Koty'i Koty'i
3.1 Koty'i Koty'i Koty'i Koty'i Koty'i 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>