Saltar al contingut principal Saltar a la navegació de documents
in English

Taules

Documentació i exemples per a l'estil d'activació de les taules (donat el seu ús predominant als connectors de JavaScript) amb Bootstrap.

Visió general

A causa de l'ús generalitzat d' <table>elements en ginys de tercers com ara calendaris i selectors de dates, les taules de Bootstrap estan activades . Afegiu la classe base .tablea qualsevol <table>i, a continuació, amplieu-lo amb les nostres classes modificadores opcionals o estils personalitzats. Tots els estils de taula no s'hereten a Bootstrap, és a dir, qualsevol taula imbricada pot tenir un estil independent del pare.

Utilitzant l'etiquetatge de taules més bàsic, aquí teniu el .tableaspecte de les taules basades en Bootstrap.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<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>

Variants

Utilitzeu classes contextuals per pintar taules, files de taules o cel·les individuals.

Classe Encapçalament Encapçalament
Per defecte Cèl·lula Cèl·lula
primària Cèl·lula Cèl·lula
Secundària Cèl·lula Cèl·lula
Èxit Cèl·lula Cèl·lula
Perill Cèl·lula Cèl·lula
Avís Cèl·lula Cèl·lula
Informació Cèl·lula Cèl·lula
Llum Cèl·lula Cèl·lula
Fosc Cèl·lula Cèl·lula
<!-- 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>
Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hiddenclasse.

Taules amb accent

Files de ratlles

Utilitzeu .table-striped-lo per afegir ratlles de zebra a qualsevol fila de la taula dins del fitxer <tbody>.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-striped">
  ...
</table>

Aquestes classes també es poden afegir a les variants de la taula:

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-success table-striped">
  ...
</table>

Files flotables

Afegeix .table-hoverper habilitar l'estat de flotació a les files de la taula dins d'un fitxer <tbody>.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-hover">
  ...
</table>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-dark table-hover">
  ...
</table>

Aquestes files flotants també es poden combinar amb la variant de ratlles:

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-striped table-hover">
  ...
</table>

Taules actives

Ressalteu una fila o cel·la de taula afegint una .table-activeclasse.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<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>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<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>

Com funcionen les variants i les taules accentuades?

Per a les taules accentuades ( files amb ratlles , files flotants i taules actives ), hem utilitzat algunes tècniques per fer que aquests efectes funcionin per a totes les nostres variants de taula :

  • Comencem establint el fons d'una cel·la de taula amb la --bs-table-bgpropietat personalitzada. Totes les variants de la taula estableixen aquesta propietat personalitzada per acolorir les cel·les de la taula. D'aquesta manera, no ens fiquem problemes si s'utilitzen colors semitransparents com a fons de taula.
  • A continuació, afegim una ombra de quadre inserit a les cel·les de la taula amb box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);la capa a sobre de qualsevol especificada background-color. Com que fem servir una gran difusió i sense desenfocament, el color serà monòton. Com --bs-table-accent-bgque no està configurat per defecte, no tenim una ombra de quadre predeterminada.
  • Quan s'afegeixen , .table-stripedo .table-hoverclasses , s'estableix en un color semitransparent per acolorir el fons..table-active--bs-table-accent-bg
  • Per a cada variant de taula, generem un --bs-table-accent-bgcolor amb el contrast més alt en funció d'aquest color. Per exemple, el color d'accent .table-primaryés més fosc mentre que .table-darkté un color d'accent més clar.
  • Els colors del text i de la vora es generen de la mateixa manera, i els seus colors s'hereten per defecte.

Entre bastidors es veu així:

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

Vores de la taula

Taules vorejades

Afegiu .table-borderedles vores a tots els costats de la taula i cel·les.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-bordered">
  ...
</table>

Es poden afegir utilitats de color de vora per canviar els colors:

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Taules sense vores

Afegiu .table-borderlessper a una taula sense vores.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-borderless">
  ...
</table>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Taules petites

Afegiu .table-sm-lo per fer-ho .tablemés compacte tallant totes les cel·les paddingper la meitat.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-sm">
  ...
</table>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-dark table-sm">
  ...
</table>

Alineació vertical

Les cel·les de la taula <thead>sempre estan alineades verticalment a la part inferior. Les cel·les de la taula <tbody>hereten la seva alineació <table>i s'alineen a la part superior de manera predeterminada. Utilitzeu les classes d' alineació vertical per tornar a alinear quan calgui.

Títol 1 Títol 2 Títol 3 Títol 4
Aquesta cel·la hereta vertical-align: middle;de la taula Aquesta cel·la hereta vertical-align: middle;de la taula Aquesta cel·la hereta vertical-align: middle;de la taula Aquest és un text de marcador de posició, destinat a ocupar una mica d'espai vertical, per demostrar com funciona l'alineació vertical a les cel·les anteriors.
Aquesta cel·la hereta vertical-align: bottom;de la fila de la taula Aquesta cel·la hereta vertical-align: bottom;de la fila de la taula Aquesta cel·la hereta vertical-align: bottom;de la fila de la taula Aquest és un text de marcador de posició, destinat a ocupar una mica d'espai vertical, per demostrar com funciona l'alineació vertical a les cel·les anteriors.
Aquesta cel·la hereta vertical-align: middle;de la taula Aquesta cel·la hereta vertical-align: middle;de la taula Aquesta cel·la està alineada a la part superior. Aquest és un text de marcador de posició, destinat a ocupar una mica d'espai vertical, per demostrar com funciona l'alineació vertical a les cel·les anteriors.
<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>

Nidificació

Els estils de vora, els estils actius i les variants de taula no són heretats per les taules imbricades.

# Primer Darrer Gestionar
1 senyal Otto @mdo
Capçalera Capçalera Capçalera
A Primer Darrer
B Primer Darrer
C Primer Darrer
3 Larry l'ocell @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Com funciona la nidificació

Per evitar que cap estil es filtri a les taules imbricades, utilitzem el >selector del combinador fill ( ) al nostre CSS. Com que hem d'orientar totes les tds i ths a thead, tbody, i tfoot, el nostre selector es veuria bastant llarg sense ell. Com a tal, utilitzem el .table > :not(caption) > * > *selector d'aspecte força estrany per orientar totes les tds i ths del .table, però cap de les possibles taules imbricades.

Tingueu en compte que si afegiu <tr>s com a fills directes d'una taula, aquests <tr>s'embolicaran de <tbody>manera predeterminada, fent que els nostres selectors funcionin com cal.

Anatomia

Cap de taula

De manera semblant a les taules i les taules fosques, utilitzeu les classes modificadores .table-lighto .table-darkper fer que <thead>s apareguin de color gris clar o fosc.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Peu de taula

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
Peu de pàgina Peu de pàgina Peu de pàgina Peu de pàgina
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Subtítols

A <caption>funciona com l'encapçalament d'una taula. Ajuda els usuaris amb lectors de pantalla a trobar una taula i entendre de què es tracta i decidir si la volen llegir.

Llista d'usuaris
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

També podeu posar el <caption>damunt de la taula amb .caption-top.

Llista d'usuaris
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<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>

Taules responsives

Les taules responsives permeten desplaçar-se horitzontalment amb facilitat. Fes que qualsevol taula respongui a totes les finestres visualitzades embolicant un .tableamb .table-responsive. O, escolliu un punt d'interrupció màxim amb el qual voleu tenir una taula responsiva amb .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Retall/truncament vertical

Les taules responsives fan servir overflow-y: hidden, que retalla qualsevol contingut que va més enllà de les vores inferior o superior de la taula. En particular, això pot retallar menús desplegables i altres ginys de tercers.

Sempre sensible

A cada punt d'interrupció, utilitzeu -lo .table-responsiveper a taules de desplaçament horitzontal.

# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Punt d'interrupció específic

Utilitzeu .table-responsive{-sm|-md|-lg|-xl|-xxl}-lo segons sigui necessari per crear taules responsives fins a un punt d'interrupció concret. A partir d'aquest punt d'interrupció, la taula es comportarà amb normalitat i no es desplaçarà horitzontalment.

Aquestes taules poden semblar trencades fins que els seus estils responsius s'apliquen a amplades específiques de la finestra gràfica.

# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
<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

Les variables

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

Bucle

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

Personalització

  • Les variables del factor ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) s'utilitzen per determinar el contrast en les variants de la taula.
  • A part de les variants de la taula clara i fosca, els colors del tema s'il·luminen amb la $table-bg-levelvariable.