Fa'asolo ile anotusi autu Fa'asolo ile fa'ata'ita'iga o fa'amatalaga
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 filifilia 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 uma o laulau e le o tu'ufa'atasia i Bootstrap, o lona uiga o so'o se laulau fa'amomoli e mafai ona fa'avasega 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 suiga 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 se tulaga fa'afefe 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 :

  • Tatou amata i le setiina o le tua o se laulau laulau ma le --bs-table-bgmeatotino masani. O suiga uma o le laulau ona seti lea o le meatotino fa'ale-aganu'u e valivali ai sela o le laulau. O le auala lea, tatou te le oo ai 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 ona o le faaletonu. 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 maua vertical-align: middle;mai le laulau O lenei sela e maua vertical-align: middle;mai le laulau O lenei sela e maua 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 maua 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 Uu
1 Mareko Otto @mdo
Ulutala Ulutala Ulutala
A Tulaga tasi Mulimuli
B Tulaga tasi Mulimuli
C Tulaga tasi Mulimuli
3 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 tutusa ma laulau ma laulau pogisa, fa'aoga vasega fa'aliliu .table-lightpo'o .table-darkle fa'aali <thead>s e mama pe 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 dropdown ma isi widgets isi vaega.

Talitonu i taimi uma

I so'o se va'aiga uma, fa'aoga .table-responsivemo laulau ta'avale 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.

E ono foliga malepe nei laulau se'ia o'o ina fa'aoga a latou sitaili tali 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) e fa'aoga 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.