Saltar al contenido principal Salta a docs navegación
in English

Tablas

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

Hatun qhawariy

<table>Kimsa kaq widgetkunapura elementokuna mast'arisqa llamk'achisqanrayku, calendariokuna chaymanta p'unchaw akllaqkuna hina, Bootstrap tablakuna opt-in kanku . Yanapakuy claseta .tablemayqin kaqmanpas yapay <table>, chaymanta mast'ariy akllana tikraq claseykuwan utaq sapanchasqa estilokunawan. Llapan tabla estilokuna mana Bootstrap kaqpi herenciayuqchu, niyta munan mayqin anidado tablakuna taytamanta sapanchasqa estilochasqa kanman.

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

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

Kay clasekuna tabla variantes kaqkunamanpas yapasqa kanman:

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi
<table class="table table-dark table-striped">
  ...
</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-success table-striped">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Kay hoverable filakunataqa rayayuq variantewanpas hukllawakunmanmi:

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi
<table class="table table-striped table-hover">
  ...
</table>

Tablas activas

Tabla filata utaq celdatapas huk .table-activeclase yapaspa resaltay.

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi
<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>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi
<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>

¿Imaynatataq llamkanku variantes hinaspa tablas acentuadas?

Acentuado tablakunapaq ( rayayuq filakuna , hoverable filakuna , chaymanta llamk'aq tablakuna ), wakin técnicas llamk'achirqayku kay efectos llamk'anankupaq llapa tabla variantesniykupaq :

  • 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.
  • Mayqinpas .table-striped, .table-hovericha .table-activeclasekuna yapasqa kaptin, chay --bs-table-accent-bghuk kuskanchasqa llimp'iman churasqa qhipaman llimp'inanpaq.
  • 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.
  • Qillqap, k'iti llimp'ikunapas kikin hinam paqarichisqa, llimp'inkunapas ñawpaqmanta hinam herenciayuq.

Qhipanpi kayjina rikch'akun:

@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));
  }
}

Tabla fronteras

Mesas bordadas

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

Borde color yanapakuykunata yapayta atikunman llimp'ikunata tikranapaq:

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

Tablas sin fronteras

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

Uchuy mesakuna

Yapay .table-smima aswan compacto kananpaq llapa celulata kuskanman .tablekuchuspa .padding

# . Ñ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>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi
<table class="table table-dark table-sm">
  ...
</table>

Alineación vertical nisqa

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

Nido

Fronte estilokuna, ruwaq estilokuna chaymanta tabla variantes mana anidado tablakuna herenciasqachu kanku.

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
Uma Uma Uma
A Ñawpaq Qipa
B Ñawpaq Qipa
C Ñawpaq Qipa
3. Larry chay Pisqu @twitter nisqapi
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Imaynatataq nido ruway llamk’an

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>

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Mesa chaki

# . Ñawpaq Qipa Hapina
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi
Chaki Chaki Chaki Chaki
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 P'isqu @twitter nisqapi
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Chaytapas churawaqmi <caption>mesapa hawanpi kaqtapas .caption-top.

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

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.

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

Variables nisqakuna

$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%;

Kutipayay

$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,
);

Personalizar

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