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

Mark

Otto

@mdo

Kapo	Kapo	Kapo
A	Unue	Laste
B	Unue	Laste
C	Unue	Laste

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.