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 lang 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 klaro 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 kita magkaproblema kung ang mga 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 nakapanunod `vertical-align: middle;`gikan sa lamesa	Kini nga selula nakapanunod `vertical-align: middle;`gikan sa lamesa	Kini nga selula nakapanunod `vertical-align: middle;`gikan sa lamesa	Ania ang pipila ka teksto sa placeholder, 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, 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: middle;`gikan sa lamesa	Kini nga selula nakapanunod `vertical-align: middle;`gikan sa lamesa	Kini nga selula gipahiangay sa ibabaw.	Ania ang pipila ka teksto sa placeholder, 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

Mark

Si Otto

@mdo

Ulohan	Ulohan	Ulohan
A	Una	Katapusan
B	Una	Katapusan
C	Una	Katapusan

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 naghimo 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 s nga gaan 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.