in English

Laupapa

Faʻamaumauga ma faʻataʻitaʻiga mo le filifilia o le siiina o laulau (tuʻuina atu lo latou faʻaogaina masani i JavaScript plugins) ma Bootstrap.

I luga o lenei itulau

Vaaiga lautele

Ona o le lautele o le faʻaogaina o <table>elemene i luga o widget vaega lona tolu e pei o kalena ma tagata e piki aso, o laulau a Bootstrap e filifili i totonu . Fa'aopoopo le vasega fa'avae .tablei so'o se <table>, ona fa'alautele lea ma a matou vasega fa'aopoopo e filifili po'o sitaili masani. O sitaili laulau uma e le o tu'ufa'atasia i Bootstrap, o lona uiga o so'o se laulau fa'amomoli e mafai ona fa'ailoga tuto'atasi mai le matua.

I le faʻaaogaina o le faʻailoga pito sili ona taua, o le faʻaogaina lea o .tablelaulau faʻavae i Bootstrap.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@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>

Eseesega

Fa'aoga vasega fa'apitoa e valivali ai laulau, laina laulau po'o sela ta'itasi.

Vasega	Ulutala	Ulutala
Fa'atonu	sela	sela
Peraimeri	sela	sela
Lua	sela	sela
Manuia	sela	sela
Mata'utia	sela	sela
Lapataiga	sela	sela
Fa'amatalaga	sela	sela
Malamalama	sela	sela
Pogisa	sela	sela

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

Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .visually-hiddenvasega.

Laupapa fa'amamafa

laina laina

Fa'aoga .table-stripede fa'aopoopo ai le zebra-striping i so'o se laina laulau i totonu o le <tbody>.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

E mafai fo'i ona fa'aopoopoina vasega nei i fa'asologa o laulau:

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

laina fa'afefe

Fa'aopoopo .table-hoverina ia mafai ai ona fa'ae'e le tulaga i luga o laina laulau i totonu ole <tbody>.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class="table table-dark table-hover">
  ...
</table>

E mafai fo'i ona tu'ufa'atasia nei laina fa'afefeteina ma le 'ese'ese laina:

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

laulau fa'agaoioi

Fa'ailoga se laina laulau po'o se sela e ala i le fa'aopoopoina o se .table-activevasega.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@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>

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@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>

E fa'afefea ona fa'agaoioi le 'ese'ese ma laulau fa'aitumalo?

Mo laulau fa'ailo ( laina laina , laina fa'afefete , ma laulau fa'agaoioiga ), na matou fa'aogaina nisi o metotia e fa'aoga ai nei a'afiaga mo a matou laulau eseese :

Matou te amata i le setiina o le tua o se laulau laulau ma le --bs-table-bgmeatotino masani. O suiga uma o le laulau ona fa'atulaga lea o mea fa'ale-aganu'u e valivali ai sela laulau. I lenei auala, tatou te le oʻo i faʻalavelave pe a faʻaogaina lanu semi-manino e fai ma faʻasologa o laulau.
Ona matou faʻaopopoina lea o se atigi pusa faʻapipiʻi i luga o sela laulau ma box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);faʻapipiʻi i luga o soʻo se mea faʻapitoa background-color. Talu ai matou te faʻaaogaina se faʻasalalauga tele ma leai se faʻafefe, o le lanu o le a monotone. Talu ai --bs-table-accent-bgua le setiina e ala i le faaletonu, e leai sa matou ata lafoia o pusa.
Pe a fa'aopoopo le .table-striped, .table-hoverpo'o .table-activevasega, --bs-table-accent-bge fa'atulaga le lanu i se lanu semitransparent e valivali ai le tua.
Mo suiga laulau ta'itasi, matou te fa'atupuina se --bs-table-accent-bglanu e maualuga le fa'atusatusaga e fa'atatau i lena lanu. Mo se fa'ata'ita'iga, o le si'i lanu mo .table-primarye sili atu le pogisa ae .table-darke mama le lanu si'i.
O tusitusiga ma lanu tuaoi e gaosia i le auala lava e tasi, ma o latou lanu e tuufaasolo ona o le faaletonu.

I tua atu o vaaiga e pei o lenei:

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

tuaoi o laulau

Laupapa tuaoi

Fa'aopoopo .table-borderedmo tuaoi i itu uma o le laulau ma sela.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

E mafai ona fa'aopoopo mea fa'aoga lanu tuaoi e sui ai lanu:

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Laupapa e leai ni tuaoi

Faaopoopo .table-borderlessmo se laulau e leai ni tuaoi.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Laiti laulau

Fa'aopoopo .table-smina ia .tablefa'aopoopo atili e ala i le tipiina o sela uma paddingi le afa.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Fa'aoga tu'usa'o

O sela o laulau o <thead>lo'o fa'aoga sa'o i le pito i lalo. O sela laulau i totonu e <tbody>maua mai lo latou fa'aogaina mai <table>ma e fa'aoga i le pito i luga e ala i le fa'aletonu. Fa'aoga vasega fa'aoga sa'o e toe fa'aoga i mea e mana'omia.

Ulutala 1	Ulutala 2	Ulutala 3	Ulutala 4
O lenei sela e tuufaasolo`vertical-align: middle;`mai le laulau	O lenei sela e tuufaasolo`vertical-align: middle;`mai le laulau	O lenei sela e tuufaasolo`vertical-align: middle;`mai le laulau	O nisi nei o tusitusiga o lo'o tu'u i luga, ua fa'amoemoe e fa'aoga ai sina avanoa tu'usa'o, e fa'aalia ai pe fa'afefea ona fa'aoga le fa'aoga sa'o i sela na muamua atu.
O lenei sela e tuufaasolo`vertical-align: bottom;`mai le laina laulau	O lenei sela e maua `vertical-align: bottom;`mai le laina laulau	O lenei sela e maua `vertical-align: bottom;`mai le laina laulau	O nisi nei o tusitusiga o lo'o tu'u i luga, ua fa'amoemoe e fa'aoga ai sina avanoa tu'usa'o, e fa'aalia ai pe fa'afefea ona fa'aoga le fa'aoga sa'o i sela na muamua atu.
O lenei sela e maua `vertical-align: middle;`mai le laulau	O lenei sela e maua `vertical-align: middle;`mai le laulau	O lenei sela e fa'aoga i le pito i luga.	O nisi nei o tusitusiga o lo'o tu'u i luga, ua fa'amoemoe e fa'aoga ai sina avanoa tu'usa'o, e fa'aalia ai pe fa'afefea ona fa'aoga le fa'aoga sa'o i sela na muamua atu.

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

Faamoega

Sitaili tuaoi, sitaili malosi, ma suiga laulau e le tuufaasolo mai i laulau faamoega.

Tulaga tasi

Mulimuli

Mareko

Otto

@mdo

Ulutala	Ulutala	Ulutala
A	Tulaga tasi	Mulimuli
B	Tulaga tasi	Mulimuli
C	Tulaga tasi	Mulimuli

Larry

le Manu

@twitter

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

Auala e galue ai faamoega

Ina ia puipuia soʻo se sitaili mai le tafe i luga o laulau faʻapipiʻi, matou te faʻaogaina le child combinator ( >) filifili i la matou CSS. Talu ai e tatau ona tatou tulimata'i uma tds ma ths i totonu o le thead, tbody, ma le tfoot, e foliga umi la tatou filifiliga e aunoa ma lea. E pei o lea, matou te fa'aogaina le filifiliga e foliga ese .table > :not(caption) > * > *e fa'atatau i tds ma ths uma o le .table, ae leai se tasi o so'o se laulau fa'apena.

Manatua afai e te faʻaopoopoina <tr>le s e pei o tamaiti tuusaʻo o se laulau, <tr>o le a afifiina i latou i se mea <tbody>e le mafai, ma faʻapea e faʻaoga a matou tagata filifilia e pei ona faʻamoemoeina.

Anatomy

Ulu laulau

E pei o laulau ma laulau pogisa, fa'aoga vasega fa'aliliu .table-lightpo'o .table-darkle <thead>fa'aalia o le malamalama po'o le efuefu pogisa.

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

vae laulau

#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter
Fa'avae	Fa'avae	Fa'avae	Fa'avae

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

Fa'amatalaga

O se <caption>galuega e pei o se ulutala mo se laulau. E fesoasoani i tagata fa'aoga i lau faitau mata e su'e se laulau ma malamalama i lona uiga ma filifili pe latou te fia faitau i ai.

Lisi o tagata fa'aoga
#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

E mafai foi ona e tuu le <caption>pito i luga ole laulau ma .caption-top.

Lisi o tagata fa'aoga
#	Tulaga tasi	Mulimuli	Uu
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@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>

laulau tali

O laulau tali e fa'ataga ai le ta'ai fa'alava ma faigofie. Fai so'o se laulau e tali atu i va'aiga uma e ala i le afifiina o .tablele .table-responsive. Po'o, filifili se pito maualuga e mafai ona i ai se laulau tali atu e ala i le fa'aogaina o le .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Tu'u sa'o/tapuina

O laulau talitali e fa'aoga ai le overflow-y: hidden, lea e tipi ese ai so'o se mea e alu i tua atu o pito pito i lalo po'o pito i luga ole laulau. Aemaise lava, e mafai e lenei mea ona tipi ese menus pa'ū ma isi widgets isi vaega.

Talitonu i taimi uma

I luga o so'o se mea malolo, fa'aoga .table-responsivemo laulau fa'ata'amilo fa'alava.

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela	sela

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

Fa'ailoga fa'apitoa

Fa'aoga .table-responsive{-sm|-md|-lg|-xl|-xxl}pe a mana'omia e fai ai laulau fa'afofoga e o'o atu i se vaega fa'apitoa. Mai lena vaeluaga ma luga, o le laulau o le a amio masani ae le taʻavale faalava.

O nei laulau e ono foliga malepe se'ia o latou sitaili tali mai e fa'aoga i le lautele o va'aiga fa'apitoa.

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela

#	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala	Ulutala
1	sela	sela	sela	sela	sela	sela	sela	sela
2	sela	sela	sela	sela	sela	sela	sela	sela
3	sela	sela	sela	sela	sela	sela	sela	sela

<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

Fuafuaga

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

Ta'amilosaga

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

Fa'asinomaga

Ole fa'ailoga ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) o lo'o fa'aaogaina e iloa ai le fa'atusatusaga o suiga ole laulau.
E ese mai le lanu malamalama ma le pogisa o laulau, o lanu autu e faʻamalamalamaina e le $table-bg-levelfesuiaiga.