Source

Tabulae

Documenta et exempla pro opt-in stylis tabularum (praevalentibus usu in JavaScript plugins datis) apud Bootstrap.

Exempla

Ob diffusum usum tabularum transversae tertiae factionis contenta quasi calendaria et dies fraudatores, tabulas nostras destinavimus ut -in optet . Modo basim cuivis classi adiiciam .table, <table>deinde stylos consuetos vel varias inclusas modificantes classes extende.

Mensa principalissima markup utens, hic est quomodo .tabletabulae fundatae in Bootstrap spectant. Omnes styli mensae in Bootstrap hereditantur 4 , significantes quaslibet tabulas nestas eodem modo quo parens vocabitur .

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @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>

Colores etiam invertere potes in textibus levibus in locis obscuris—cum .table-dark.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @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>

Mensam caput optiones

Similia tabulae et tabulae obscurae, utere classibus determinativis, .thead-lightvel .thead-darkut <thead>appareant lux vel grisea.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @twitter
# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @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>

Striata ordines

Addere .table-stripedadhibenda est zebra-striata ad quemlibet ordinem tabulae intra <tbody>.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @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>
# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @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>

praetextae mensae

Adde .table-borderedlimites undique mensae et cellae.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>
# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>

Borderless mensam

Adde .table-borderlesspro mensa sine finibus.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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-borderlessadhiberi potest etiam in tabulis obscuris.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>

Hoverable ordines

Adde .table-hoverut status tabernus tabulae intra a <tbody>.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>
# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>

Parva mensa

Adde .table-smut tabulas magis compactas secando cellam dimidii.

# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>
# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @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>

Contextual classes

Classes contextuales utere ad ordines tabulas colorandas vel singulas cellulas.

Classis Venantius Fortunatus Venantius Fortunatus
Active Cellula Cellula
Default Cellula Cellula
Primarium Cellula Cellula
secundarium Cellula Cellula
Success Cellula Cellula
Periculum Cellula Cellula
Monitum Cellula Cellula
Info Cellula Cellula
lux Cellula Cellula
Dark Cellula Cellula 
<!-- 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>

Tabulae variantes ordinariae cum mensa obscura praesto non sunt, tamen textu vel curriculo utilitates ad similes stilos assequendas uti licet.

# Venantius Fortunatus Venantius Fortunatus
1 Cellula Cellula
2 Cellula Cellula
3 Cellula Cellula
4 Cellula Cellula
5 Cellula Cellula
6 Cellula Cellula
7 Cellula Cellula
8 Cellula Cellula
9 Cellula Cellula 
<!-- 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>
Deferre significatio technologiae adiuvandae

Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .sr-onlygenere.

Facere tabulas responsivas cum quibuslibet involucris .table, .table-responsive{-sm|-md|-lg|-xl}faciens tabulam in latitudine ad librum cuiusque max-widthconfractionis usque ad (sed non comprehendo) 576px, 768px, 992px, et 1120px, respective.

Nota quod, cum navigatores in contextu quaestionis amplis non sustinent , circa limitationes min-et max-praefixiones et prospectus fractis latitudinibus laboramus (quod sub quibusdam condicionibus altis machinis, exempli gratia, potest accidere) utendo valores altioribus ad has comparationes accuratissime. .

Captions

Munera <caption>sicut petere mensam. Utentes adiuvat legentibus in screen ut mensam inveniat et quid suus 'intelligat' et si eam legere voluerint, decernunt.

Index users
# Primis Last Capulus
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @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>

Responsivum tabulae

Mensae responsales permittunt tabulas facile transversas in volumine. Fac quamlibet mensam responsivam per omnes prospectus per involutionem .tablecum .table-responsive. Vel elige punctum maximum quo ad mensam responsivam habere utendo .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping / truncation

Mensae responsoriae utuntur overflow-y: hidden, quae res aliquas rescindunt quae super imum vel summum tabulae margines excedunt. Praesertim hoc menus dropdown et aliae tertiae factionis contenta circumplecti possunt.

Semper responsive

Per omne punctum, utere .table-responsivead tabulas horizontaliter scrolling.

# Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint specifica

Utere .table-responsive{-sm|-md|-lg|-xl}ut opus est ad mensas responsivas creandas usque ad punctum particulare fracturae. Ab illo puncto et sursum, mensa regulariter se geret et non horizontaliter librum.

Hae tabulae fractae videri possunt donec styli responsivas eorum in latitudines certas prospectus applicant.

# Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus Venantius Fortunatus
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>