Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Mga lamesa

Dokumentasyon ug mga pananglitan alang sa pag-opt-in nga estilo sa mga lamesa (gihatag sa ilang kaylap nga paggamit sa JavaScript plugins) uban sa Bootstrap.

Niini nga panid

Overview

Tungod sa kaylap nga paggamit sa <table>mga elemento sa mga third-party nga widgets sama sa mga kalendaryo ug mga tigpili sa petsa, ang mga lamesa sa Bootstrap nag- opt-in . Idugang ang base nga klase .tablesa bisan unsang <table>, unya i-extend gamit ang among opsyonal nga mga klase sa modifier o custom nga mga estilo. Ang tanan nga mga istilo sa lamesa wala napanunod sa Bootstrap, nagpasabut nga ang bisan unsang nested nga mga lamesa mahimong i-istilo nga independente gikan sa ginikanan.

Gamit ang labing sukaranan nga marka sa lamesa, ania kung giunsa ang .tablepagtan-aw sa mga lamesa nga nakabase sa Bootstrap.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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

Gamita ang mga klase sa konteksto sa pagkolor sa mga lamesa, mga laray sa lamesa o indibidwal nga mga selula.

Klase Ulohan Ulohan
Default Cell Cell
Primary Cell Cell
Ikaduha Cell Cell
Kalampusan Cell Cell
Kuyaw Cell Cell
Pasidaan Cell Cell
Impormasyon Cell Cell
Kahayag Cell Cell
Ngitngit 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>
Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Mga accented nga lamesa

Mga guhit nga laray

Gamita .table-stripedaron idugang ang zebra-striping sa bisan unsang laray sa lamesa sulod sa <tbody>.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-striped">
  ...
</table>

Kini nga mga klase mahimo usab nga idugang sa mga variant sa lamesa:

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-success table-striped">
  ...
</table>

Mapalupad nga mga laray

Idugang .table-hoveraron mahimo ang usa ka hover state sa mga laray sa lamesa sulod sa usa ka <tbody>.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-hover">
  ...
</table>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Kini nga mga hoverable nga mga laray mahimo usab nga ikombinar sa mga striped nga variant:

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Aktibo nga mga lamesa

I-highlight ang usa ka laray sa lamesa o cell pinaagi sa pagdugang usa ka .table-activeklase.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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 Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>

Giunsa pagtrabaho ang mga variant ug accented nga mga lamesa?

Para sa mga accented nga mga lamesa ( striped row , hoverable row , ug active tables ), migamit mi og mga teknik aron magamit kining mga epekto sa tanan namong mga variant sa lamesa :

  • Nagsugod kami pinaagi sa pagbutang sa background sa usa ka cell sa lamesa nga adunay --bs-table-bgnaandan nga kabtangan. Ang tanan nga mga variant sa lamesa dayon nagtakda sa naandan nga kabtangan aron makolor ang mga cell sa lamesa. Niining paagiha, dili kami magkaproblema kung ang semi-transparent nga mga kolor gigamit isip mga background sa lamesa.
  • Dayon magdugang kami og inset box shadow sa mga selyula sa lamesa uban box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);sa layer sa ibabaw sa bisan unsa nga espesipiko background-color. Tungod kay naggamit kami usa ka dako nga pagkaylap ug walay blur, ang kolor mahimong monotone. Tungod kay --bs-table-accent-bgwala mabutang sa default, wala kami usa ka default nga anino sa kahon.
  • Kung idugang ang .table-striped, .table-hovero .table-activemga klase, ang --bs-table-accent-bggibutang sa usa ka semitransparent nga kolor aron makolor ang background.
  • Alang sa matag variant sa lamesa, nagmugna kami usa ka --bs-table-accent-bgkolor nga adunay labing taas nga kalainan depende sa kana nga kolor. Pananglitan, ang kolor sa accent kay .table-primarymas itom samtang .table-darkadunay mas gaan nga kolor sa accent.
  • Ang mga kolor sa teksto ug utlanan gihimo sa samang paagi, ug ang ilang mga kolor napanunod pinaagi sa default.

Sa luyo sa mga talan-awon kini ingon niini:

@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 utlanan sa lamesa

Bordered nga mga lamesa

Idugang .table-borderedang mga utlanan sa tanang kilid sa lamesa ug mga selula.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-bordered">
  ...
</table>

Ang mga gamit sa kolor sa utlanan mahimong idugang aron mabag-o ang mga kolor:

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Mga lamesa nga walay mga utlanan

Idugang .table-borderlessalang sa usa ka lamesa nga walay mga utlanan.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-borderless">
  ...
</table>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Mga gagmay nga lamesa

Idugang .table-smaron mahimong .tablemas compact pinaagi sa pagputol sa tanan nga cell paddingsa tunga.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-sm">
  ...
</table>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Bertikal nga paglinya

Ang mga selyula sa lamesa sa <thead>kanunay nga bertikal nga gipahiangay sa ilawom. Ang mga cell sa lamesa sa <tbody>pagpanunod sa ilang paglinya gikan sa <table>ug gipahiangay sa ibabaw pinaagi sa default. Gamita ang bertikal align nga mga klase aron i-align pag-usab kung gikinahanglan.

Ulohan 1 Ulohan 2 Ulohan 3 Ulohan 4
Kini nga selula makapanunod vertical-align: middle;gikan sa lamesa Kini nga selula makapanunod vertical-align: middle;gikan sa lamesa Kini nga selula makapanunod vertical-align: middle;gikan sa lamesa Ania ang pipila ka teksto sa placeholder, nga gituyo nga mokuha ug gamay nga bertikal nga wanang, aron ipakita kung giunsa ang bertikal nga paglinya sa paglihok sa nag-una nga mga selyula.
Kini nga selula nakapanunod vertical-align: bottom;gikan sa laray sa lamesa Kini nga selula nakapanunod vertical-align: bottom;gikan sa laray sa lamesa Kini nga selula nakapanunod vertical-align: bottom;gikan sa laray sa lamesa Ania ang pipila ka teksto sa placeholder, nga gituyo nga mokuha ug gamay nga bertikal nga wanang, aron ipakita kung giunsa ang bertikal nga paglinya sa paglihok sa nag-una nga mga selyula.
Kini nga selula makapanunod vertical-align: middle;gikan sa lamesa Kini nga selula makapanunod vertical-align: middle;gikan sa lamesa Kini nga selula gipahiangay sa ibabaw. Ania ang pipila ka teksto sa placeholder, nga gituyo nga mokuha ug gamay nga bertikal nga wanang, aron ipakita kung giunsa ang bertikal nga paglinya sa paglihok sa nag-una nga mga selyula. 
<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>

Nagsalag

Ang mga istilo sa utlanan, aktibo nga mga istilo, ug mga variant sa lamesa dili mapanunod sa mga nested table.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
Ulohan Ulohan Ulohan
A Una Katapusan
B Una Katapusan
C Una Katapusan
3 Larry Ang langgam @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Sa unsang paagi ang pagsalag nagtrabaho

Aron mapugngan ang bisan unsang mga istilo gikan sa pagtulo sa mga nested nga lamesa, among gigamit ang child combinator ( >) nga tigpili sa among CSS. Tungod kay kinahanglan natong i-target ang tanang mga tds ug ths sa thead, tbody, ug tfoot, ang atong tigpili motan-aw og dugay kung wala kini. Ingon niana, gigamit namon ang medyo katingad-an nga .table > :not(caption) > * > *tigpili nga tan-awon aron ma-target ang tanan tdnga s ug ths sa .table, apan wala’y bisan unsang potensyal nga nested nga mga lamesa.

Timan-i nga kung imong idugang <tr>ang s ingon direkta nga mga bata sa usa ka lamesa, <tr>kini maputos sa usa ka <tbody>default, sa ingon maghimo sa among mga tigpili nga molihok sama sa katuyoan.

Anatomy

Ulo sa lamesa

Susama sa mga lamesa ug ngitngit nga mga lamesa, gamita ang mga klase sa modifier .table-lighto .table-darkaron <thead>makita ang mga s nga kahayag o itom nga gray.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

tiil sa lamesa

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Mga kapsyon

Ang usa ka <caption>gimbuhaton sama sa usa ka ulohan alang sa usa ka lamesa. Nakatabang kini sa mga tiggamit nga adunay mga screen reader nga makit-an ang usa ka lamesa ug masabtan kung unsa kini ug makadesisyon kung gusto nila basahon kini.

Listahan sa mga tiggamit
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Mahimo usab nimo ibutang ang <caption>ibabaw sa lamesa nga adunay .caption-top.

Listahan sa mga tiggamit
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>

Responsive nga mga lamesa

Ang mga responsive nga mga lamesa nagtugot sa mga lamesa nga ma-scroll nga pinahigda nga dali. Himoa ang bisan unsang lamesa nga motubag sa tanan nga mga viewport pinaagi sa pagputos sa usa .tableka .table-responsive. O, pagpili og usa ka maximum breakpoint diin adunay usa ka responsive nga lamesa pinaagi sa paggamit sa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikal nga pagputol/pagputol

Ang mga responsive nga mga lamesa naggamit sa overflow-y: hidden, nga nagputol sa bisan unsang sulod nga labaw pa sa ubos o ibabaw nga mga kilid sa lamesa. Sa partikular, mahimo kining putlon ang mga dropdown menu ug uban pang mga widget sa ikatulo nga partido.

Kanunay nga motubag

Sa matag breakpoint, gamita .table-responsivepara sa horizontal scrolling tables.

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

Espesyal nga breakpoint

Gamita .table-responsive{-sm|-md|-lg|-xl|-xxl}kung gikinahanglan aron makahimo og mga responsive nga mga lamesa hangtod sa usa ka partikular nga breakpoint. Gikan sa kana nga breakpoint ug pataas, ang lamesa molihok nga normal ug dili mag-scroll nga pinahigda.

Kini nga mga lamesa mahimong makita nga nabuak hangtod ang ilang mga istilo sa pagtubag magamit sa piho nga gilapdon sa viewport.

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

Pag-customize

  • Ang factor variables ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) gigamit aron mahibal-an ang kalainan sa mga variant sa lamesa.
  • Gawas sa light & dark nga mga variant sa lamesa, ang mga kolor sa tema gipagaan sa $table-bg-levelvariable.