in English

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.

Ko páhinape

Tembiecharã

Ojepuru hetaiterei rupi umi <table>elemento mbohapýha widget rupive haꞌeháicha arapapaha ha ára jeporavoha, Bootstrap vorekuéra haꞌehína opt-in . Emoĩ pe clase base .tableoimeraẽvape <table>, upéi embohape ñande clase modificador opcional térã estilo personalizado reheve. Opaite tabla estilo ndojeheredái Bootstrap-pe, heꞌiséva oimeraẽva tabla anidado ikatuha oñemboguapy ijeheguiete túvagui.

Oipurúvo cuadro marcado iñepyrũrãvéva, ko’ápe ojehecha mba’éichapa .tableojehecha umi tabla -based Bootstrap-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">
  <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>

Variantes rehegua

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

Mbo'ehakoty	Ñe’ẽryru	Ñe’ẽryru
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 .visually-hiddenmboꞌepy ndive.

Umi cuadro oguerekóva acento

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 pe Guyra		@twitter-pe

<table class="table table-striped">
  ...
</table>

Ko’ã mbo’esyry ikatu avei oñembojoapy umi variante tabla rehegua:

# Ñ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-dark table-striped">
  ...
</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-success table-striped">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Koꞌã fila ojeipysóva ikatu avei oñembojoaju pe variante rayada ndive:

# Ñ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-striped table-hover">
  ...
</table>

Umi cuadro activa rehegua

Emombaꞌeguasu peteĩ vore vore térã celda emoĩvo peteĩ .table-activemboꞌepy.

# Ñ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">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Mba éichapa omba apo umi variante ha umi cuadro acento rehegua.

Umi cuadro acentuado-pe g̃uarã ( filas rayadas , filas hoverables ha cuadros activas ), roipuru algunas técnicas koꞌã efecto ombaꞌapo hag̃ua opaite ore tabla variante-pe g̃uarã :

Ñañepyrũ ñamohendavo peteĩ celda tabla rehegua fondo orekóva --bs-table-bgpropiedad personalizada. Opaite tabla variante upéi omohenda upe propiedad personalizada ocolora hag̃ua umi celda tabla rehegua. Péicha, ndajaikei apañuãime ojeporúramo umi saꞌi semitransparente mesa fondo ramo.
Upéi ñamoĩ peteĩ sombra caja inserta rehegua umi celda mesa rehegua orekóva box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to capa oimeraẽva ojeꞌevaꞌekue ári background-color. Jaipuru rupi petet dispersión tuichaitereíva ha ndaipóri desenfoque, pe color ha e va erã monotono. Oje’e’ỹ guive --bs-table-accent-bgpor defecto, ndoroguerekói peteĩ sombra caja por defecto.
Oñemoĩ jave peteĩva .table-striped, .table-hovertérã .table-activembo’esyry, pe --bs-table-accent-bgoñemohenda peteĩ sa’y semitransparente-pe oñembosa’y hag̃ua tapykuehoha.
Káda variante tabla rehegua, jagenera petet --bs-table-accent-bgcolor oguerekóva contraste ijyvatevéva odependéva upe color rehe. Techapyrã, pe acento color para .table-primaryiñypytũve .table-darkoguereko aja peteĩ acento color tesapevéva.
Jehaipyre ha rembe’y sa’ykuéra oñemboheko peteĩcha, ha isa’ykuéra ojehereda por defecto.

Umi escenario rapykuéri ojehecha péicha:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Mesa rembe’ykuéra

Mesakuéra oguerekóva frontera

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">
  ...
</table>

Umi utilidad color frontera rehegua ikatu oñembojoapy oñemoambue hag̃ua color:

# Ñ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 border-primary">
  ...
</table>

Umi mesa ndorekóiva frontera

Oñemoĩve .table-borderlesspeteĩ mesa ndorekóiva frontera-pe 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-borderless">
  ...
</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-dark table-borderless">
  ...
</table>

Mesa michĩva

Oñemoĩve .table-smojejapo .tablehaguã compactove oñeikytĩvo opaite célula paddingmbyté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">
  ...
</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-dark table-sm">
  ...
</table>

Alineación vertical rehegua

Umi célula mesa rehegua de <thead>akóinte oñemohenda verticalmente iguy gotyo. Umi celda tabla rehegua oĩva <tbody>ohereda iñemohendahagui <table>ha oñemboheko yvate gotyo por defecto. Eipuru umi clase alineación vertical rehegua emohenda jey hag̃ua tekotevẽhápe.

Ñe’ẽryru 1.1	Ñe’ẽryru 2.1	Ñe’ẽryru 3.1	Ñe’ẽryru 4.1
Ko celda ohereda `vertical-align: middle;`pe cuadro-gui	Ko celda ohereda `vertical-align: middle;`pe cuadro-gui	Ko celda ohereda `vertical-align: middle;`pe cuadro-gui	Kóva koꞌape oĩ peteĩ jehaipyre tenda rehegua, oñembosakoꞌivaꞌekue oipyhy hag̃ua hetaiterei espacio vertical, ohechauka hag̃ua mbaꞌeichaitépa ombaꞌapo pe alineación vertical umi celda mboyveguápe.
Ko celda ohereda `vertical-align: bottom;`pe tabla vore’ígui	Ko celda ohereda `vertical-align: bottom;`pe tabla vore’ígui	Ko celda ohereda `vertical-align: bottom;`pe tabla vore’ígui	Kóva koꞌape oĩ peteĩ jehaipyre tenda rehegua, oñembosakoꞌivaꞌekue oipyhy hag̃ua hetaiterei espacio vertical, ohechauka hag̃ua mbaꞌeichaitépa ombaꞌapo pe alineación vertical umi celda mboyveguápe.
Ko celda ohereda `vertical-align: middle;`pe cuadro-gui	Ko celda ohereda `vertical-align: middle;`pe cuadro-gui	Ko célula oñemohenda yvate gotyo.	Kóva koꞌape oĩ peteĩ jehaipyre tenda rehegua, oñembosakoꞌivaꞌekue oipyhy hag̃ua hetaiterei espacio vertical, ohechauka hag̃ua mbaꞌeichaitépa ombaꞌapo pe alineación vertical umi celda mboyveguápe.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nidación rehegua

Umi estilo frontera rehegua, estilo activo ha umi variante tabla rehegua ndojeheredavéi umi tabla anidado rupive.

# Ñemby

Peteĩha

Paha

Ipoguýpe oĩva

1. 1.1

Marcos

Otto rehegua

@mdo rehegua

Akãrapu’ã	Akãrapu’ã	Akãrapu’ã
PETEĨ	Peteĩha	Paha
B. Ñe’ẽpoty ha purahéi	Peteĩha	Paha
C rehegua	Peteĩha	Paha

3.1

Larry rehegua

pe Guyra

@twitter-pe

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Mba’éichapa omba’apo anidación

Ani hag̃ua mba’eveichagua estilo osẽ umi tabla anidado-pe, jaipuru mboajepyréva combinador infantil ( >) ñande CSS-pe. Tekotevẽgui ñamohenda opaite tds ha ths oĩva thead, tbody, ha -pe tfoot, ñande selector ojehecha puku porãta hese’ỹre. Péicha, jaipuru .table > :not(caption) > * > *selector ojehecharamovéva impar-pe ñamohenda hag̃ua opaite tds ha ths umi .table, ha katu ni peteĩva mbaꞌeveichagua tabla anidado potencial-gui.

Ñañaminduꞌu ñamoĩramo <tr>s peteĩ mesa raꞌy directo ramo, umíva <tr>oñembojere a-pe <tbody>por defecto, upéicha rupi ñande selector-kuéra ombaꞌapo oñehaꞌarõháicha.

Anatomía rehegua

Mesa akã

Ojogua umi cuadro ha cuadro iñypytũvape, eipuru umi clase modificador .table-lighttérã .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </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">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Mesa py

# Ñ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
Ñepyrũrã	Ñepyrũrã	Ñepyrũrã	Ñepyrũrã

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 pe Guyra		@twitter-pe

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ikatu avei remoĩ <caption>pe mesa ári .caption-top.

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-top">
  <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|-xxl}.

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|-xxl}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.

Ko’ã cuadro ikatu ojehechauka oñembyaíva umi estilo ombohováiva ojeporu peve umi jehechaukaha ancho específico-pe.

# Ñemby	Ñ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
2. 2.1	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

# Ñemby	Ñ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
2. 2.1	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

# Ñemby	Ñ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
2. 2.1	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

# Ñemby	Ñ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
2. 2.1	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

# Ñemby	Ñ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
2. 2.1	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

# Ñemby	Ñ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
2. 2.1	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

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

<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>

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

Sass rehegua

Variables rehegua

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Sã

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Personalización rehegua

Umi variable factor rehegua ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ojepuru ojekuaa hagua mba éichapa ojoavy umi variante cuadro rehegua.
Ambue umi variante mesa tesape & iñypytũvagui, umi color tema rehegua oñembohesape pe $table-bg-levelvariable rupive.