Tabulae

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

In hac pagina

Overview

Ob divulgatum elementorum usum <table>per tertiam factionem contentorum quasi calendariorum et notarum fraudatores, tabulae Bootstrap sunt in opt-in . Classem basim cuivis adde .table, <table>cum nostris stylis ad libitum determinativis classes vel consuetudines extende. Omnes styli mensae in Bootstrap hereditari non possunt, significantes quaslibet mensas nestas independentes a parente dici possunt.

Mensa fundamentalis notae utens, hic est quomodo .tabletabulae fundatae spectant in Bootstrap.

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

Variantes

Classes contextuales utere ad tabulas colorandas, ordines mensas vel ad singulas cellulas.

Classis	Venantius Fortunatus	Venantius Fortunatus
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 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>

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 .visually-hiddengenere.

Tabulae acuta

Striata ordines

Addere uti .table-stripedzebra-striata ad quemlibet ordinem tabulae intra <tbody>.

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-striped">
  ...
</table>

Columnas albas

.table-striped-columnsZebra-clava ad quamlibet columnam tabulam addere utendum est.

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-striped-columns">
  ...
</table>

Hae classes etiam variantibus tabulae addi possunt;

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-dark table-striped-columns">
  ...
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-success table-striped">
  ...
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-success table-striped-columns">
  ...
</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">
  ...
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Hi ordines mobiles etiam componi possunt cum ordinibus striatis variantes;

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Active tables

Exaggerare mensam ordinis seu cellam addito .table-activegenere.

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

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

Quomodo tabulae variantes et accentuatae operantur?

Pro tabulis acuiis ( ordinibus striatis , columnis striatis , ordinibus mobilibus , et actuosis tabulis ) usi sumus technicis quibusdam artificiis ad hos effectus operandos ad omnes tabulas nostras variantes :

Incipimus collocando curriculum mensae cellae cum --bs-table-bgproprietate consuetudinis. Omnes tabulae variantes tunc pone proprietatem illam consuetudinem ut cellas mensae colorant. Hoc modo non moleste venimus si colores semi-perlucentes utantur mensae in subiectis.
Deinde addimus umbram cistae incisam super cellulis mensae cum box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);tabulato super quodvis determinatum background-color. Quia vasto utimur et nullo labes, color monotonus erit. Cum --bs-table-accent-bgper defaltam instatur, defaltam umbram non habemus.
Ubi vel , vel .table-stripedclasses .table-striped-columnsadditae sunt, colori semitransparent ad colorandum subiectum positum est..table-hover.table-active--bs-table-accent-bg
Pro unaquaque tabula variante, generamus --bs-table-accent-bgcolorem summa antithesi pendentia ab illo colore. Verbi gratia, color .table-primaryaccentuum est obscurior, dum .table-darkhabet leviorem accentum colorem.
Colores colorum et fimbriarum generantur eodem modo, et eorum colores per defaltam hereditantur.

Post scaenas sic apparet;

@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));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$table-border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Tabula fines

Tabulae praetextae

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">
  ...
</table>

Terminus color utilitatis addi potest ad mutationem colorum;

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Tabulae sine finibus

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">
  ...
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Tabulae parvae

Adde .table-smquovis .tablepacto quovis secando cellulam paddingin medium efficias.

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-sm">
  ...
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Mensam coetus circino

Terminum crassiorem adde, inter circulos mensarum obscuriores - <thead>, <tbody>, et <tfoot>-cum .table-group-divider. Mos colorem mutando border-top-color(quod nunc utilem genus hoc tempore non praebemus).

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

html

<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 class="table-group-divider">
    <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>

Gratia diei et noctis verticalis

Mensae cellae <thead>semper ad imum verticalem perpenduntur. Tabulae cellae in <tbody>hereditate suae noctis ab <table>et ad summum per defaltam perpenduntur. Utere perpendiculo align classes ad re-align ubi opus fuerit.

Petere 1	Petere 2	Petere III "	Petere 4
Haec cellula hæredit `vertical-align: middle;`a mensa	Haec cellula hæredit `vertical-align: middle;`a mensa	Haec cellula hæredit `vertical-align: middle;`a mensa	Hic textus quidam locus possessoris est, qui aliquid spatii verticalis assumere intendit, ut demonstraret quomodo dam verticalem in cellulis praecedentibus operatur.
Haec cellula hereditat `vertical-align: bottom;`a mensa row	Haec cellula hereditat `vertical-align: bottom;`a mensa row	Haec cellula hereditat `vertical-align: bottom;`a mensa row	Hic textus quidam locus possessoris est, qui aliquid spatii verticalis assumere intendit, ut demonstraret quomodo dam verticalem in cellulis praecedentibus operatur.
Haec cellula hæredit `vertical-align: middle;`a mensa	Haec cellula hæredit `vertical-align: middle;`a mensa	Haec cellula ad cacumen varius est.	Hic textus quidam locus possessoris est, qui aliquid spatii verticalis assumere intendit, ut demonstraret quomodo dam verticalem in cellulis praecedentibus operatur.

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

Nidificans

Termini styli, styli activorum, et variantes mensae a tabulis nidificatis non possidentur.

Primis

Last

Capulus

Mark

Otto

@mdo

Header	Header	Header
A	Primis	Last
B	Primis	Last
C	Primis	Last

Larry

Avis

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Ut opera nidificans

Ad tabulas nidificandas ne stili quidlibet emissae, puero combinatore utimur ( >) electore nostro in CSS. Cum opus sit ut omnia tds et ths in thead, tbodyet tfoot, selector noster sine ea satis diu inspiciat . .table > :not(caption) > * > *Ut tales, selectorem magis inparem intuentem omnes tds et ths oppugnare utimur .table, nullae autem ullius tabulae potentialis nestrae.

Nota quod si addas <tr>filios directos mensae, illi <tr>involventur <tbody>per defaltam, ita selectores nostros ut institutum operantur.

Anatomia

Mensa caput

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

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Mensa pes

#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter
Footer	Footer	Footer	Footer

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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	Avis Larry		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Potes etiam <caption>mensam cum superpositam ponere .caption-top.

Index users
#	Primis	Last	Capulus
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

html

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

Responsivum tables

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

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 alia tertia-pars contenta detondere potest.

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

#	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

#	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

#	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

#	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

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

Variabilium

$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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Loop

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

Customizing

Variabiles factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) adhibentur ad discrepantiam in tabulis variantibus determinare.
Praeter tabulam lucem & obscuram variantes, argumenta colorum $table-bg-scalevariabilium illustrantur.