Source

Tabeloj

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

Ekzemploj

Pro la disvastigita uzo de tabeloj tra triaj uzaĵoj kiel kalendaroj kaj dato-elektiloj, ni desegnis niajn tabelojn por esti enskribitaj . Nur aldonu la bazan klason .tableal iu ajn <table>, tiam etendiĝu per kutimaj stiloj aŭ niaj diversaj inkluzivitaj modifiklasoj.

Uzante la plej bazan tabelmarkadon, jen kiel .table-bazitaj tabeloj aspektas en Bootstrap. Ĉiuj tabelstiloj estas hereditaj en Bootstrap 4 , kio signifas, ke ĉiuj nestitaj tabeloj estos stilitaj en la sama maniero kiel la gepatro.

# 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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Vi ankaŭ povas inversigi la kolorojn—kun malpeza teksto sur malhelaj fonoj—per .table-dark.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
<table class="table table-dark">
  <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>

Opcioj de tablokapo

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

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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">
  <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>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
<table class="table table-striped table-dark">
  <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>

Bordita tablo

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">
  <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>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-bordered table-dark">
  <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>

Senlima tablo

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

.table-borderlessuzeblas ankaŭ sur malhelaj tabloj.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-borderless table-dark">
  <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>

Ŝ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">
  <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>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-hover table-dark">
  <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>

Malgranda tablo

Aldonu .table-smpor fari tablojn pli kompaktajn per tranĉado de ĉela remburaĵo en duono.

# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-sm">
  <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>
# Unue Laste Tenilo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
<table class="table table-sm table-dark">
  <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>

Kuntekstaj klasoj

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

Klaso Titolo Titolo
Aktiva Ĉelo Ĉelo
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Regulaj tabelaj fonvariaĵoj ne haveblas kun la malhela tabelo, tamen vi povas uzi tekston aŭ fonajn ilojn por atingi similajn stilojn.

# Titolo Titolo
1 Ĉelo Ĉelo
2 Ĉelo Ĉelo
3 Ĉelo Ĉelo
4 Ĉelo Ĉelo
5 Ĉelo Ĉelo
6 Ĉelo Ĉelo
7 Ĉelo Ĉelo
8 Ĉelo Ĉelo
9 Ĉelo Ĉelo 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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ŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Kreu respondemajn tabelojn envolvante iujn ajn .tableper .table-responsive{-sm|-md|-lg|-xl}, igante la tabelon ruliĝi horizontale ĉe ĉiu max-widthrompopunkto de ĝis (sed ne inkluzive) 576px, 768px, 992px, kaj 1120px, respektive.

Notu, ke ĉar retumiloj nuntempe ne subtenas gamo-kuntekstdemandojn , ni laboras ĉirkaŭ la limigoj de min-kaj max-prefiksoj kaj vidfenestroj kun frakciaj larĝoj (kiuj povas okazi sub certaj kondiĉoj ĉe alt-dpi-aparatoj, ekzemple) uzante valorojn kun pli alta precizeco por ĉi tiuj komparoj. .

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">
  <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}.

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 uzaĵ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}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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>