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.

En aquesta pàgina

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 del contingut en si (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 configurant el fons d'una cel·la de taula amb el--bs-table-bg propietat 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. Des de--bs-table-accent-bg que 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

senyal

Otto

@mdo

Capçalera	Capçalera	Capçalera
A	Primer	Darrer
B	Primer	Darrer
C	Primer	Darrer

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

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.