Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
in English

Tabeloj

Dokumentado kaj ekzemploj por enskribstilado de tabeloj (konsiderante ilia ĝenerala uzo en JavaScript-kromaĵoj) kun Bootstrap.

Sur ĉi tiu paĝo

Superrigardo

Pro la disvastigita uzo de <table>elementoj tra triaj uzaĵoj kiel kalendaroj kaj dato-elektiloj, la tabeloj de Bootstrap estas elekteblaj . Aldonu la bazan klason .tableal iu ajn <table>, tiam etendu per niaj laŭvolaj modifklasoj aŭ kutimaj stiloj. Ĉiuj tabelstiloj ne estas hereditaj en Bootstrap, tio signifas, ke ĉiuj nestitaj tabeloj povas esti stilitaj sendepende de la gepatro.

Uzante la plej bazan tabelmarkadon, jen kiel .table-bazitaj tabeloj aspektas en Bootstrap.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @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>

Variantoj

Uzu kuntekstajn klasojn por kolorigi tabelojn, tabelvicojn aŭ individuajn ĉelojn.

Klaso Titolo Titolo
Defaŭlte Ĉelo Ĉelo
Primaraj Ĉelo Ĉelo
Sekundara Ĉelo Ĉelo
Sukceso Ĉelo Ĉelo
Danĝero Ĉelo Ĉelo
Averto Ĉelo Ĉelo
Info Ĉelo Ĉelo
Lumo Ĉelo Ĉelo
Mallumo Ĉelo Ĉelo 
<!-- 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>
Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.

Akcentitaj tabloj

Striitaj vicoj

Uzu .table-stripedpor aldoni zebro-striadon al iu tabelvico ene de la <tbody>.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-striped">
  ...
</table>

Ĉi tiuj klasoj ankaŭ povas esti aldonitaj al tabelvariaĵoj:

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-success table-striped">
  ...
</table>

Ŝvebeblaj vicoj

Aldoni .table-hoverpor ebligi ŝveban staton sur tabelvicoj ene de <tbody>.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-hover">
  ...
</table>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Ĉi tiuj ŝvebeblaj vicoj ankaŭ povas esti kombinitaj kun la stria varianto:

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Aktivaj tabloj

Emfazu tabelvicon aŭ ĉelon aldonante .table-activeklason.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @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>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @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>

Kiel funkcias la variantoj kaj supersignitaj tabeloj?

Por la supersignitaj tabeloj ( striitaj vicoj , ŝvebeblaj vicoj kaj aktivaj tabeloj ), ni uzis kelkajn teknikojn por ke ĉi tiuj efikoj funkciu por ĉiuj niaj tabelvariaĵoj :

  • Ni komencas fiksante la fonon de tabelĉelo kun la --bs-table-bgpropra propraĵo. Ĉiuj tabelvariaĵoj tiam agordu tiun kutiman posedaĵon por kolorigi la tabelĉelojn. Tiel, ni ne havas problemojn se duontravideblaj koloroj estas uzataj kiel tabelfonoj.
  • Tiam ni aldonas enmetitan skatolon-ombron sur la tabelĉelojn kun box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);al tavolo super iu ajn specifita background-color. Ĉar ni uzas grandegan disvastigon kaj neniun malklariĝon, la koloro estos monotona. Ĉar --bs-table-accent-bgestas neagordita defaŭlte, ni ne havas defaŭltan keston-ombron.
  • Kiam aŭ .table-striped, .table-hoveraŭ .table-activeklasoj estas aldonitaj, la --bs-table-accent-bgestas agordita al duontravidebla koloro por kolorigi la fonon.
  • Por ĉiu tabelvariaĵo, ni generas --bs-table-accent-bgkoloron kun la plej alta kontrasto depende de tiu koloro. Ekzemple, la akcentkoloro por .table-primaryestas pli malhela dum .table-darkhavas pli helan akcentkoloron.
  • Tekstaj kaj randkoloroj estas generitaj same, kaj iliaj koloroj estas hereditaj defaŭlte.

Malantaŭ la scenoj ĝi aspektas jene:

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

Tabelbordoj

Borditaj tabloj

Aldonu .table-borderedpor randoj sur ĉiuj flankoj de la tablo kaj ĉeloj.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-bordered">
  ...
</table>

Bordaj koloraj utilecoj povas esti aldonitaj por ŝanĝi kolorojn:

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Tabeloj sen randoj

Aldonu .table-borderlesspor tablo sen randoj.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-borderless">
  ...
</table>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Malgrandaj tabloj

Aldonu .table-smpor fari .tablepli kompaktan tranĉante ĉiujn ĉelojn paddingen duono.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-sm">
  ...
</table>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Vertikala vicigo

Tabelĉeloj de <thead>estas ĉiam vertikalaj vicigitaj al la fundo. Tabelĉeloj <tbody>heredas sian vicigon de <table>kaj estas vicigitaj al la supro defaŭlte. Uzu la vertikalajn vicigklasojn por realigi kie necesas.

Titolo 1 Titolo 2 Titolo 3 Titolo 4
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo Jen iu lokokupilo teksto, celita por okupi sufiĉe da vertikala spaco, por montri kiel funkcias la vertikala vicigo en la antaŭaj ĉeloj.
Ĉi tiu ĉelo heredas vertical-align: bottom;de la tabelvico Ĉi tiu ĉelo heredas vertical-align: bottom;de la tabelvico Ĉi tiu ĉelo heredas vertical-align: bottom;de la tabelvico Jen iu lokokupilo teksto, celita por okupi sufiĉe da vertikala spaco, por montri kiel funkcias la vertikala vicigo en la antaŭaj ĉeloj.
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo Ĉi tiu ĉelo estas vicigita al la supro. Jen iu lokokupilo teksto, celita por okupi sufiĉe da vertikala spaco, por montri kiel funkcias la vertikala vicigo en la antaŭaj ĉeloj. 
<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>

Nestumado

Bordaj stiloj, aktivaj stiloj kaj tabelvariaĵoj ne estas hereditaj de nestitaj tabeloj.

# Unue Laste Tenilo
1 Mark Otto @mdo
Kapo Kapo Kapo
A Unue Laste
B Unue Laste
C Unue Laste
3 Larry la birdo @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kiel nestumado funkcias

Por malhelpi ajnajn stilojn liki al nestitaj tabeloj, ni uzas la infanan kombinilon ( >) elektilon en nia CSS. Ĉar ni devas celi ĉiujn tds kaj ths en la thead, tbody, kaj tfoot, nia elektilo aspektus sufiĉe longe sen ĝi. Kiel tia, ni uzas la sufiĉe strangan aspektantan .table > :not(caption) > * > *elektilon por celi ĉiujn tds kaj ths de la .table, sed neniu el eventualaj nestitaj tabeloj.

Notu, ke se vi aldonas <tr>s kiel rektajn filojn de tablo, tiuj <tr>estos envolvitaj en a <tbody>defaŭlte, tiel igante niajn elektilojn funkcii kiel celite.

Anatomio

Tablokapo

Simile al tabeloj kaj malhelaj tabeloj, uzu la modifklasojn .table-lightaŭ .table-darkpor ke <thead>s aperi hele aŭ malhelgrizaj.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tablopiedo

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter
Piedo Piedo Piedo Piedo 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Subtitoloj

A <caption>funkcias kiel titolo por tabelo. Ĝi helpas uzantojn kun ekranlegiloj trovi tabelon kaj kompreni pri kio temas kaj decidi ĉu ili volas legi ĝin.

Listo de uzantoj
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Vi ankaŭ povas meti la <caption>sur la supro de la tablo kun .caption-top.

Listo de uzantoj
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @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>

Respondema tabeloj

Respondema tabeloj permesas tabelojn rulumi horizontale kun facileco. Faru ajnan tabelon respondema tra ĉiuj vidfenestroj envolvante .tableper .table-responsive. Aŭ elektu maksimuman rompopunkton kun kiu havi respondeman tabelon ĝis uzante .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikala tondado/tranĉado

Respondema tabeloj uzas overflow-y: hidden, kiu detranĉas ajnan enhavon kiu iras preter la malsupraj aŭ supraj randoj de la tabelo. Aparte, ĉi tio povas detranĉi falmenuojn kaj aliajn triajn fenestraĵojn.

Ĉiam respondema

Tra ĉiu rompopunkto, uzu .table-responsivepor horizontale ruliĝantaj tabloj.

# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Rompopunkto specifa

Uzu .table-responsive{-sm|-md|-lg|-xl|-xxl}laŭbezone por krei respondemajn tabelojn ĝis aparta rompopunkto. De tiu rompopunkto kaj supren, la tablo kondutos normale kaj ne rulumo horizontale.

Ĉi tiuj tabeloj povas ŝajni rompitaj ĝis iliaj respondemaj stiloj validas ĉe specifaj vidfenestrolarĝoj.

# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
# Titolo Titolo Titolo Titolo Titolo Titolo Titolo Titolo
1 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
2 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo
3 Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo Ĉelo 
<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

Variabloj

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

Buklo

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

Agordado

  • La faktoraj variabloj ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) estas uzataj por determini la kontraston en tabelvariaĵoj.
  • Krom la mallumaj kaj malhelaj tabelvariaĵoj, etoskoloroj estas malpezigitaj de la $table-bg-levelvariablo.