Tablo

Dokimantasyon ak egzanp pou patisipe nan manier tab yo (bay itilizasyon yo répandus nan grefon JavaScript) ak Bootstrap.

Nan paj sa a

Apèsi sou lekòl la

Akòz itilizasyon toupatou nan <table>eleman yo atravè widgets twazyèm pati yo tankou kalandriye ak chwazi dat, tab Bootstrap yo patisipe . Ajoute klas debaz la .tablenan nenpòt <table>, Lè sa a, pwolonje ak klas modifye opsyonèl nou yo oswa estil koutim. Tout estil tab yo pa eritye nan Bootstrap, sa vle di nenpòt tab enbrike ka style endepandan de paran an.

Sèvi ak makè tab ki pi fondamantal la, men ki jan .tabletab ki baze sou yo gade nan Bootstrap.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

Variants

Sèvi ak klas kontèks pou koulè tab yo, ranje tab oswa selil endividyèl yo.

Klas	Tit	Tit
Default	Selil	Selil
Prensipal	Selil	Selil
Segondè	Selil	Selil
Siksè	Selil	Selil
Danje	Selil	Selil
Avètisman	Selil	Selil
Info	Selil	Selil
Limyè	Selil	Selil
Fè nwa	Selil	Selil

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

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hiddenklas la.

Tablo aksantye

Ranje trase

Sèvi ak .table-stripedpou ajoute zebra-striping nan nenpòt ranje tab nan <tbody>.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Kolòn trase

Sèvi ak .table-striped-columnspou ajoute zebra-striping nan nenpòt kolòn tab la.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Yo ka ajoute klas sa yo tou nan varyant tab yo:

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Ranje hoverable

Ajoute .table-hoverpou pèmèt yon eta hover sou ranje tab nan yon <tbody>.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Ranje hoverable sa yo kapab tou konbine avèk varyant ranje tras:

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Tablo aktif

Mete aksan sou yon ranje tab oswa yon selil lè w ajoute yon .table-activeklas.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

Ki jan varyant yo ak tab aksantye yo travay?

Pou tab aksantye yo ( ranje tras, kolòn tras , ranje hoverable , ak tab aktif ), nou te itilize kèk teknik pou fè efè sa yo mache pou tout varyant tab nou yo :

Nou kòmanse pa mete background nan nan yon selil tab ak --bs-table-bgpwopriyete a koutim. Tout varyant tab Lè sa a, mete pwopriyete koutim sa a koloran selil tab yo. Nan fason sa a, nou pa jwenn nan pwoblèm si koulè semi-transparan yo itilize kòm orijin tab.
Lè sa a, nou ajoute yon lonbraj bwat Inset sou selil tab yo ak box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);kouch sou tèt nenpòt ki espesifye background-color. Paske nou itilize yon gwo gaye epi pa gen okenn flou, koulè a pral monotone. Piske --bs-table-accent-bgse pa dekole pa default, nou pa gen yon lonbraj bwat default.
Lè yo ajoute swa .table-striped, .table-striped-columns, .table-hoveroswa .table-activeklas yo, yo --bs-table-accent-bgmete nan yon koulè semitransparan pou koloran background nan.
Pou chak varyant tab, nou jenere yon --bs-table-accent-bgkoulè ak pi gwo kontras depann de koulè sa a. Pou egzanp, koulè a aksan pou .table-primaryse pi fonse pandan y ap .table-darkgen yon koulè aksan pi lejè.
Tèks ak koulè fwontyè yo pwodwi menm jan an, epi koulè yo eritye pa default.

Dèyè sèn nan li sanble sa a:

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

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$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);
  }
}

Fwontyè tab la

Tablo Borded

Ajoute .table-borderedpou fwontyè sou tout kote tab la ak selil yo.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Ou ka ajoute sèvis piblik koulè fwontyè pou chanje koulè:

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Tablo san fwontyè

Ajoute .table-borderlesspou yon tab san fwontyè.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Ti tab

Ajoute .table-smpou fè nenpòt ki .tableplis kontra enfòmèl ant pa koupe tout selil paddingan mwatye.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Tablo gwoup divize

Ajoute yon fwontyè ki pi epè, ki pi fonse ant gwoup tab yo— <thead>, <tbody>, ak <tfoot>—ak .table-group-divider. Pèsonalize koulè a pa chanje a border-top-color(ki kounye a nou pa bay yon klas sèvis piblik pou kounye a).

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

Aliyman vètikal

Selil tab <thead>yo toujou vètikal ki aliyen ak pati anba a. Selil tab yo <tbody>eritye aliyman <table>yo epi yo aliyen sou tèt la pa default. Sèvi ak klas aliman vètikal yo pou re-aliyen kote sa nesesè.

Tit 1	Tit 2	Tit 3	Tit 4
Selil sa a eritye `vertical-align: middle;`nan tab la	Selil sa a eritye `vertical-align: middle;`nan tab la	Selil sa a eritye `vertical-align: middle;`nan tab la	Sa a isit la se kèk tèks anplasman, ki gen entansyon pran byen yon ti kras nan espas vètikal, yo demontre ki jan aliyman vètikal la ap travay nan selil anvan yo.
Selil sa a eritye `vertical-align: bottom;`nan ranje tab la	Selil sa a eritye `vertical-align: bottom;`nan ranje tab la	Selil sa a eritye `vertical-align: bottom;`nan ranje tab la	Sa a isit la se kèk tèks anplasman, ki gen entansyon pran byen yon ti kras nan espas vètikal, yo demontre ki jan aliyman vètikal la ap travay nan selil anvan yo.
Selil sa a eritye `vertical-align: middle;`nan tab la	Selil sa a eritye `vertical-align: middle;`nan tab la	Selil sa a ki aliyen ak tèt la.	Sa a isit la se kèk tèks anplasman, ki gen entansyon pran byen yon ti kras nan espas vètikal, yo demontre ki jan aliyman vètikal la ap travay nan selil anvan yo.

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

Nidifikasyon

Styles fwontyè, estil aktif, ak varyant tab yo pa eritye pa tab enbrike.

Premye

Denye

Manch

Mak

Otto

@mdo

Header	Header	Header
A	Premye	Denye
B	Premye	Denye
C	Premye	Denye

Larry

Zwazo a

@twitter

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

Ki jan nidifikasyon travay

Pou anpeche nenpòt estil soti nan koule nan tab enbrike, nou itilize >seleksyon an konbinatè timoun ( ) nan CSS nou an. Depi nou bezwen vize tout tds ak ths nan thead, tbody, ak tfoot, seleksyon nou an ta sanble trè long san li. Kòm sa yo, nou itilize seleksyon an kap olye enpè .table > :not(caption) > * > *yo vize tout tds ak ths nan .table, men pa youn nan nenpòt ki potansyèl tab enbrike.

Remake byen ke si ou ajoute <tr>s kòm pitit dirèk nan yon tab, sa <tr>yo pral vlope nan yon <tbody>pa default, kidonk fè seleksyon nou yo travay jan sa vle di.

Anatomi

Tèt tab la

Menm jan ak tab ak tab nwa, sèvi ak klas modifye yo .table-lightoswa .table-darkpou fè <thead>s parèt limyè oswa gri fonse.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

Pye tab

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter
Footer	Footer	Footer	Footer

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

Titre

Yon <caption>fonksyon tankou yon tit pou yon tab. Li ede itilizatè ki gen lektè ekran yo jwenn yon tablo epi konprann ki sa li ye epi deside si yo vle li li.

Lis itilizatè yo
#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Ou ka mete tou <caption>sou tèt tab la ak .caption-top.

Lis itilizatè yo
#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Tab reponn

Tablo ki reponn yo pèmèt tab yo woule orizontal avèk fasilite. Fè nenpòt tab reponn nan tout fenèt yo lè w vlope yon .tableak .table-responsive. Oswa, chwazi yon pwen maksimòm ak ki gen yon tab reponn jiska lè l sèvi avèk .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Koupe vètikal/tronke

Tablo ki reponn yo sèvi ak overflow-y: hidden, ki koupe nenpòt kontni ki ale pi lwen pase kwen anba oswa anwo tab la. An patikilye, sa a ka koupe meni dropdown ak lòt widgets twazyèm pati.

Toujou reponn

Nan chak pwen, itilize .table-responsivepou tab defile orizontal.

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint espesifik

Sèvi ak .table-responsive{-sm|-md|-lg|-xl|-xxl}jan sa nesesè pou kreye tab reponn jiska yon pwen an patikilye. Soti nan pwen rupture sa a ak moute, tab la pral konpòte nòmalman epi yo pa woule orizontal.

Tablo sa yo ka parèt kase jiskaske estil reponn yo aplike nan lajè vi yo espesifik.

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

<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

Varyab

$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%;

Bouk

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

Pèrsonalizasyon

Varyab faktè ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) yo itilize pou detèmine kontras nan varyant tablo yo.
Apa de variants tab limyè ak nwa yo, koulè tèm yo aleje pa $table-bg-scalevaryab la.