Mga mesa

Dokumentasyon at mga halimbawa para sa pag-opt-in na pag-istilo ng mga talahanayan (ibinigay ang kanilang laganap na paggamit sa mga plugin ng JavaScript) gamit ang Bootstrap.

Sa pahinang ito

Pangkalahatang-ideya

Dahil sa malawakang paggamit ng mga <table>elemento sa mga third-party na widget tulad ng mga kalendaryo at tagapili ng petsa, ang mga talahanayan ng Bootstrap ay nag-opt-in . Idagdag ang base class .tablesa alinmang <table>, pagkatapos ay i-extend gamit ang aming mga opsyonal na klase ng modifier o custom na istilo. Ang lahat ng mga istilo ng talahanayan ay hindi minana sa Bootstrap, ibig sabihin, anumang mga nested na talahanayan ay maaaring i-istilo nang hiwalay sa magulang.

Gamit ang pinakapangunahing markup ng talahanayan, narito ang .tablehitsura ng mga nakabatay sa talahanayan sa Bootstrap.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@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>

Mga variant

Gumamit ng mga klase sa konteksto upang kulayan ang mga talahanayan, mga hilera ng talahanayan o mga indibidwal na cell.

Klase	Heading	Heading
Default	Cell	Cell
Pangunahin	Cell	Cell
Pangalawa	Cell	Cell
Tagumpay	Cell	Cell
Panganib	Cell	Cell
Babala	Cell	Cell
Impormasyon	Cell	Cell
Liwanag	Cell	Cell
Madilim	Cell	Cell

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

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.

Mga mesa na may accent

Mga guhit na hilera

Gamitin .table-stripedupang magdagdag ng zebra-striping sa anumang hilera ng talahanayan sa loob ng <tbody>.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Ang mga klase na ito ay maaari ding idagdag sa mga variant ng talahanayan:

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Hoverable na mga hilera

Idagdag .table-hoverupang paganahin ang isang hover state sa mga hilera ng talahanayan sa loob ng isang <tbody>.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Ang mga hoverable na row na ito ay maaari ding isama sa striped na variant:

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Mga aktibong talahanayan

I-highlight ang isang table row o cell sa pamamagitan ng pagdaragdag ng .table-activeklase.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@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>

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@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>

Paano gumagana ang mga variant at accented na talahanayan?

Para sa mga table na may accent (mga striped row , hoverable row , at active table ), gumamit kami ng ilang diskarte para gumana ang mga effect na ito para sa lahat ng variant ng table namin :

Magsisimula kami sa pamamagitan ng pagtatakda ng background ng isang table cell na may --bs-table-bgcustom na property. Pagkatapos, itinakda ng lahat ng variant ng talahanayan ang custom na property na iyon para bigyang-kulay ang mga cell ng talahanayan. Sa ganitong paraan, hindi tayo magkakaproblema kung ang mga semi-transparent na kulay ay ginagamit bilang mga background ng talahanayan.
Pagkatapos ay nagdaragdag kami ng anino ng inset box sa mga cell ng talahanayan na may box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);sa layer sa ibabaw ng anumang tinukoy background-color. Dahil gumagamit kami ng malaking spread at walang blur, magiging monotone ang kulay. Dahil --bs-table-accent-bghindi nakatakda bilang default, wala kaming default na box shadow.
Kapag ang alinman sa .table-striped, .table-hovero .table-activemga klase ay idinagdag, ang --bs-table-accent-bgay nakatakda sa isang semitransparent na kulay upang kulayan ang background.
Para sa bawat variant ng talahanayan, bumubuo kami ng isang --bs-table-accent-bgkulay na may pinakamataas na contrast depende sa kulay na iyon. Halimbawa, ang kulay ng accent para sa .table-primaryay mas madidilim habang .table-darkmay mas magaan na kulay ng accent.
Ang mga kulay ng teksto at hangganan ay nabuo sa parehong paraan, at ang kanilang mga kulay ay minana bilang default.

Sa likod ng mga eksena, ganito ang hitsura:

@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));
  }
}

Mga hangganan ng talahanayan

Mga mesa na may hangganan

Idagdag .table-borderedpara sa mga hangganan sa lahat ng panig ng talahanayan at mga cell.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Maaaring idagdag ang mga gamit sa kulay ng hangganan upang baguhin ang mga kulay:

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Mga talahanayan na walang hangganan

Magdagdag .table-borderlesspara sa isang talahanayan na walang mga hangganan.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Mga maliliit na mesa

Idagdag .table-smupang maging .tablemas compact sa pamamagitan ng pagputol sa lahat ng cell paddingsa kalahati.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Pahalang na linya

Ang mga cell ng talahanayan ng <thead>ay palaging patayong nakahanay sa ibaba. Ang mga cell ng talahanayan sa <tbody>inherit ang kanilang alignment mula sa <table>at naka-align sa itaas bilang default. Gamitin ang vertical align classes para muling i-align kung saan kinakailangan.

Pamagat 1	Pamagat 2	Pamagat 3	Pamagat 4
Nagmana ang cell na ito `vertical-align: middle;`mula sa talahanayan	Nagmana ang cell na ito `vertical-align: middle;`mula sa talahanayan	Nagmana ang cell na ito `vertical-align: middle;`mula sa talahanayan	Narito ang ilang text ng placeholder, na nilayon na kumuha ng medyo patayong espasyo, upang ipakita kung paano gumagana ang vertical alignment sa mga naunang cell.
Nagmana ang cell na ito `vertical-align: bottom;`mula sa row ng talahanayan	Nagmana ang cell na ito `vertical-align: bottom;`mula sa row ng talahanayan	Nagmana ang cell na ito `vertical-align: bottom;`mula sa row ng talahanayan	Narito ang ilang text ng placeholder, na nilayon na kumuha ng medyo patayong espasyo, upang ipakita kung paano gumagana ang vertical alignment sa mga naunang cell.
Nagmana ang cell na ito `vertical-align: middle;`mula sa talahanayan	Nagmana ang cell na ito `vertical-align: middle;`mula sa talahanayan	Ang cell na ito ay nakahanay sa itaas.	Narito ang ilang text ng placeholder, na nilayon na kumuha ng medyo patayong espasyo, upang ipakita kung paano gumagana ang vertical alignment sa mga naunang cell.

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

Pugad

Ang mga istilo ng hangganan, aktibong istilo, at variant ng talahanayan ay hindi minana ng mga nested na talahanayan.

Una

Huling

Hawakan

marka

Otto

@mdo

Header	Header	Header
A	Una	Huling
B	Una	Huling
C	Una	Huling

Larry

ang ibon

@twitter

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

Paano gumagana ang nesting

Upang maiwasan ang anumang mga istilo na tumulo sa mga nested na talahanayan, ginagamit namin ang child combinator ( >) na tagapili sa aming CSS. Dahil kailangan nating i-target ang lahat ng tds at ths sa thead, tbody, at tfoot, magiging mahaba ang hitsura ng ating selector kung wala ito. Dahil dito, ginagamit namin ang medyo kakaibang mukhang .table > :not(caption) > * > *tagapili upang i-target ang lahat ng tds at ths ng .table, ngunit wala sa anumang potensyal na nested na talahanayan.

Tandaan na kung idaragdag mo ang <tr>s bilang mga direktang anak ng isang talahanayan, ang mga iyon <tr>ay ibalot sa isang bilang <tbody>default, kaya gagawing gumagana ang aming mga tagapili ayon sa nilalayon.

Anatomy

Ulo ng mesa

Katulad ng mga talahanayan at madilim na talahanayan, gamitin ang mga klase ng modifier .table-lighto .table-darkupang gawing <thead>maliwanag o madilim na kulay abo ang mga s.

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

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

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

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

Paa ng mesa

#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter
Footer	Footer	Footer	Footer

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

Mga caption

Ang isang <caption>function ay tulad ng isang heading para sa isang table. Tinutulungan nito ang mga user na may mga screen reader na makahanap ng talahanayan at maunawaan kung tungkol saan ito at magpasya kung gusto nila itong basahin.

Listahan ng mga gumagamit
#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Maaari mo ring ilagay ang <caption>sa tuktok ng talahanayan na may .caption-top.

Listahan ng mga gumagamit
#	Una	Huling	Hawakan
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@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>

Mga tumutugon na talahanayan

Ang mga tumutugon na talahanayan ay nagbibigay-daan sa mga talahanayan na mai-scroll nang pahalang nang madali. Gawing tumutugon ang anumang talahanayan sa lahat ng viewport sa pamamagitan ng pagbabalot ng isang .tablemay .table-responsive. O kaya, pumili ng maximum na breakpoint kung saan magkakaroon ng tumutugon na talahanayan hanggang sa gamit ang .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertical clipping/truncation

Gumagamit ang mga tumutugong talahanayan ng overflow-y: hidden, na kumukuha ng anumang nilalaman na lampas sa ibaba o itaas na mga gilid ng talahanayan. Sa partikular, maaari nitong i-clip off ang mga dropdown na menu at iba pang mga widget ng third-party.

Laging tumutugon

Sa bawat breakpoint, gamitin .table-responsivepara sa pahalang na pag-scroll ng mga talahanayan.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Tukoy sa breakpoint

Gamitin .table-responsive{-sm|-md|-lg|-xl|-xxl}kung kinakailangan upang lumikha ng mga tumutugon na talahanayan hanggang sa isang partikular na breakpoint. Mula sa breakpoint na iyon at pataas, ang talahanayan ay kumikilos nang normal at hindi mag-scroll nang pahalang.

Maaaring magmukhang sira ang mga talahanayang ito hanggang sa mailapat ang mga istilong tumutugon sa mga partikular na lapad ng viewport.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<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

Mga variable

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

Pagpapasadya

Ang mga variable na salik ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) ay ginagamit upang matukoy ang kaibahan sa mga variant ng talahanayan.
Bukod sa maliwanag at madilim na mga variant ng talahanayan, ang mga kulay ng tema ay pinapagaan ng $table-bg-levelvariable.