Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation

Cov ntaub ntawv thiab cov piv txwv rau xaiv-hauv styling ntawm cov ntxhuav (muab lawv siv dav hauv JavaScript plugins) nrog Bootstrap.

Txheej txheem cej luam

Vim muaj kev siv ntau ntawm <table>cov ntsiab lus thoob plaws peb-tog widgets xws li daim ntawv qhia hnub thiab cov hnub xaiv, Bootstrap cov ntxhuav yog xaiv . Ntxiv cov chav kawm hauv paus .tablerau ib qho twg <table>, tom qab ntawd txuas ntxiv nrog peb cov kev xaiv hloov kho cov chav kawm lossis cov qauv kev cai. Tag nrho cov rooj style tsis tau txais txiaj ntsig hauv Bootstrap, txhais tau tias txhua lub rooj sib tham tuaj yeem tsim los ntawm niam txiv.

Siv cov lus qhia yooj yim tshaj plaws, ntawm no yog li cas .table-raws li cov ntxhuav saib hauv Bootstrap.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @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

Siv cov chav kawm contextual rau xim cov ntxhuav, kab kab los yog ib lub hlwb.

Chav kawm Lub taub hau Lub taub hau
Default Cell Cell
Thawj Cell Cell
Secondary Cell Cell
Kev vam meej Cell Cell
Kev phom sij Cell Cell
Ceeb toom Cell Cell
Cov ntaub ntawv Cell Cell
Teeb Cell Cell
Tsaus 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>
Qhia lub ntsiab lus rau kev pab technologies

Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .visually-hiddenchav kawm.

Accented rooj

Kab txaij

Siv .table-stripedlos ntxiv zebra-striping rau ib kab lus hauv <tbody>.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-striped">
  ...
</table>

Cov chav kawm no tuaj yeem muab ntxiv rau cov lus sib txawv:

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-success table-striped">
  ...
</table>

Hoverable kab

Ntxiv .table-hoverlos pab kom lub xeev hover ntawm cov kab lus hauv ib <tbody>.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-hover">
  ...
</table>
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-dark table-hover">
  ...
</table>

Cov kab hoverable no kuj tuaj yeem ua ke nrog cov kab sib txawv:

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-striped table-hover">
  ...
</table>

Cov rooj ua haujlwm

Qhia ib kab lus lossis xovtooj los ntawm kev ntxiv .table-activechav kawm.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @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>
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @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>

Yuav ua li cas cov variants thiab accented rooj ua hauj lwm?

Rau cov rooj hais lus ( kab kab kab , kab hoverable , thiab cov rooj ua haujlwm ), peb siv qee cov tswv yim los ua kom cov teebmeem no ua haujlwm rau tag nrho peb cov lus sib txawv :

  • Peb pib los ntawm kev teeb tsa keeb kwm yav dhau ntawm lub rooj ntawm tes nrog cov --bs-table-bgcuab yeej kev cai. Tag nrho cov rooj variants ces teeb tsa cov cuab yeej kev cai ntawd los ua kom cov xim ntawm lub rooj. Txoj kev no, peb tsis muaj teeb meem yog tias cov xim semi-pob tshab yog siv los ua cov ntawv keeb kwm yav dhau los.
  • Tom qab ntawd peb ntxiv ib lub thawv duab ntxoov ntxoo rau ntawm lub rooj cell nrog box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);rau txheej saum toj ntawm txhua qhov teev background-color. Vim tias peb siv qhov sib kis loj thiab tsis muaj qhov muag plooj, xim yuav yog monotone. Txij li thaum --bs-table-accent-bgtsis tau teeb tsa los ntawm lub neej ntawd, peb tsis muaj lub thawv duab ntxoov ntxoo.
  • Thaum twg los xij .table-striped, .table-hoverlossis .table-activecov chav kawm ntxiv, qhov --bs-table-accent-bgyog teem rau ib nrab pob tshab xim rau xim tom qab.
  • Rau txhua lub rooj variant, peb tsim cov --bs-table-accent-bgxim nrog qhov sib txawv siab tshaj plaws nyob ntawm cov xim ntawd. Piv txwv li, cov xim accent rau .table-primaryyog tsaus dua thaum .table-darkmuaj xim sib dua.
  • Cov ntawv nyeem thiab cov xim ciam teb yog tsim tib yam, thiab lawv cov xim tau txais los ntawm lub neej ntawd.

Hauv qab scenes nws zoo li no:

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

Rooj ciam teb

Cov rooj muaj ciam teb

Ntxiv .table-borderedrau ciam teb rau txhua sab ntawm lub rooj thiab cov hlwb.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-bordered">
  ...
</table>

Cov khoom siv xim ciam teb tuaj yeem ntxiv los hloov xim:

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Cov rooj tsis muaj ciam teb

Ntxiv .table-borderlessrau lub rooj tsis muaj ciam teb.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-borderless">
  ...
</table>
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Cov rooj me me

Ntxiv .table-smkom muaj .tablekev sib cog lus ntau dua los ntawm kev txiav tag nrho cov cell paddinghauv ib nrab.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-sm">
  ...
</table>
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-dark table-sm">
  ...
</table>

Vertical alignment

Cov kab lus ntawm <thead>ib txwm ntsug mus rau hauv qab. Cov kab lus hauv <tbody>cov khoom qub txeeg qub teg ntawm lawv cov kev sib raug zoo los ntawm <table>thiab tau ua raws li cov lus saum toj kawg nkaus. Siv cov chav kawm ntsug dlhos kom rov ua raws li qhov xav tau.

Ntsiab lus 1 Ntsiab lus 2 Ntsiab lus 3 Ntsiab lus 4
Cov cell no tau txais vertical-align: middle;los ntawm lub rooj Cov cell no tau txais vertical-align: middle;los ntawm lub rooj Cov cell no tau txais vertical-align: middle;los ntawm lub rooj Qhov no ntawm no yog ib co placeholder ntawv nyeem, npaj yuav coj mus rau ib tug heev me ntsis ntawm ntsug qhov chaw, qhia tau hais tias yuav ua li cas cov ntsug dlhos ua hauj lwm nyob rau hauv lub hlwb ua ntej.
Cov cell no tau txais vertical-align: bottom;los ntawm kab lus Cov cell no tau txais vertical-align: bottom;los ntawm kab lus Cov cell no tau txais vertical-align: bottom;los ntawm kab lus Qhov no ntawm no yog ib co placeholder ntawv nyeem, npaj yuav coj mus rau ib tug heev me ntsis ntawm ntsug qhov chaw, qhia tau hais tias yuav ua li cas cov ntsug dlhos ua hauj lwm nyob rau hauv lub hlwb ua ntej.
Cov cell no tau txais vertical-align: middle;los ntawm lub rooj Cov cell no tau txais vertical-align: middle;los ntawm lub rooj Lub xovtooj ntawm no yog ua raws li cov lus saum toj kawg nkaus. Qhov no ntawm no yog ib co placeholder ntawv nyeem, npaj yuav coj mus rau ib tug heev me ntsis ntawm ntsug qhov chaw, qhia tau hais tias yuav ua li cas cov ntsug dlhos ua hauj lwm nyob rau hauv lub hlwb ua ntej.
<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>

Zes

Cov qauv ciam teb, cov qauv nquag, thiab cov rooj sib txawv tsis tau txais los ntawm cov rooj nested.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
Lub taub hau Lub taub hau Lub taub hau
A Ua ntej Kawg
B Ua ntej Kawg
C Ua ntej Kawg
3 Larry noog @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Yuav ua li cas nesting ua haujlwm

Txhawm rau tiv thaiv txhua tus qauv los ntawm kev xau mus rau cov rooj zes, peb siv tus menyuam sib txuas ( >) xaiv hauv peb CSS. Txij li thaum peb xav tau lub hom phiaj tag nrho cov tds thiab ths nyob rau hauv lub thead, tbody, thiab tfoot, peb selector yuav saib zoo nkauj ntev yam tsis muaj nws. Yog li ntawd, peb siv qhov txawv txawv saib .table > :not(caption) > * > *xaiv los tsom tag nrho tdcov s thiab ths ntawm cov .table, tab sis tsis muaj ib qho ntawm cov rooj zaum nested.

Nco ntsoov tias yog tias koj ntxiv <tr>s raws li cov menyuam yaus ntawm lub rooj, cov <tr>no yuav raug muab qhwv rau hauv lub <tbody>neej ntawd, yog li ua rau peb cov neeg xaiv ua haujlwm raws li qhov xav tau.

Anatomy

Lub taub hau

Zoo ib yam li cov ntxhuav thiab cov ntxhuav tsaus, siv cov chav kawm hloov kho .table-lightlossis .table-darkua kom <thead>pom lub teeb lossis tsaus grey.

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Rooj ko taw

# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
footer footer footer footer
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Cov lus piav qhia

Ib <caption>txoj haujlwm zoo li lub taub hau rau lub rooj. Nws pab cov neeg siv nrog cov tshuaj ntsuam nyeem kom pom lub rooj thiab nkag siab tias nws yog dab tsi thiab txiav txim siab seb lawv puas xav nyeem nws.

Daim ntawv teev cov neeg siv
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Koj tuaj yeem muab tso <caption>rau saum lub rooj nrog .caption-top.

Daim ntawv teev cov neeg siv
# Ua ntej Kawg tuav
1 Mark Otto @mdo
2 Yakhauj Thornton @fat
3 Larry noog @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>

Cov lus teb

Responsive tables tso cai rau cov ntxhuav tau scrolled horizontally yooj yim. Ua ib lub rooj teb thoob plaws txhua qhov chaw saib los ntawm kev qhwv ib qho .tablenrog .table-responsive. Los yog, xaiv qhov siab tshaj plaws breakpoint uas yuav tsum muaj cov lus teb los ntawm kev siv .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertical clipping/truncation

Cov lus teb ua rau siv overflow-y: hidden, uas clips tawm cov ntsiab lus uas dhau mus rau hauv qab lossis sab saum toj ntawm lub rooj. Tshwj xeeb, qhov no tuaj yeem txiav tawm cov ntawv qhia zaub mov thiab lwm tus neeg thib peb widgets.

Ib txwm teb

Nyob rau hauv txhua rooj plaub, siv .table-responsiverau kab rov tav scrolling rooj.

# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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>

Breakpoint tshwj xeeb

Siv .table-responsive{-sm|-md|-lg|-xl|-xxl}raws li xav tau los tsim cov lus teb mus txog rau ib qho kev tawg. Los ntawm qhov tawg thiab nce mus, lub rooj yuav coj li ib txwm thiab tsis scroll horizontally.

Cov rooj no yuav tshwm sim tawg kom txog thaum lawv cov qauv teb siv tau ntawm qhov dav dav dav dav.

# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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
# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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
# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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
# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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
# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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
# Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau Lub taub hau
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

Hloov pauv

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

Customizing

  • Qhov sib txawv ntawm qhov sib txawv ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) yog siv los txiav txim qhov sib txawv hauv cov lus sib txawv.
  • Sib nrug los ntawm lub teeb & tsaus rooj variants, lub ntsiab xim yog lightened los ntawm qhov $table-bg-levelsib txawv.