Skip to main content Skip ad navigationem soUicitudo
in English

Tabulae

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

Overview

Ob diffusum <table>elementorum usum per tertiam factionem contentorum quasi calendarii et temporis fraudatores, tabulae Bootstrap sunt in opt-in . Classem basim cuivis adde .table, <table>cum nostris stylis ad libitum determinativis classibus vel consuetudinibus extende. Omnes styli mensae in Bootstrap hereditari non possunt, significationes quaslibet mensas nestas independentes a parente dici possunt.

Mensa principalissima markup utens, hic est quomodo .tabletabulae fundatae in Bootstrap spectant.

# 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 .table-stripedadhibenda est zebra-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>

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-success table-striped">
  ...
</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 striatis variantibus;

# 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 , 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 aut .table-stripedaut .table-hoverclasses .table-activeadduntur, --bs-table-accent-bgcolori semitransparent ad colorandum subiectum positum est.
  • 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));

    --#{$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));
  }
}

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>

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 perpendiculi align classes ad re-align ubi opus fuerit.

Petere 1 Petere 2 Petere 3 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
1 Mark Otto @mdo
Header Header Header
A Primis Last
B Primis Last
C Primis Last
3 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 intuenti utimur ad omnes tds et ths ipsius oppugnandum.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
<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 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|-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 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|-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:                 $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%;

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

Customising

  • 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-levelvariabilium illustrantur.