Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

Litafole

Litokomane le mehlala ea ho khetha ho kenya litafole (ho fanoe ka tšebeliso e atileng ho li-plugins tsa JavaScript) ka Bootstrap.

Kakaretso

Ka lebaka la ts'ebeliso e atileng ea <table>likarolo ho li-widget tsa mokha oa boraro joalo ka khalendara le likhetho tsa matsatsi, litafole tsa Bootstrap li khetha ho kena . Kenya sehlopha sa mantlha .tableho efe kapa efe <table>, ebe u atolosa ka litlelase tsa rona tsa boikhethelo tsa ho feto-fetoha kapa mekhoa ea tloaelo. Mefuta eohle ea litafole ha e futsitsoe ho Bootstrap, ho bolelang hore litafole life kapa life tse hahelletsoeng li ka ngoloa ntle le motsoali.

U sebelisa letšoao la motheo la tafole, mona ke hore na .tablelitafole tse thehiloeng ho Bootstrap li shebahala joang.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Mefuta e fapaneng

Sebelisa litlelase tsa maemo ho litafole tsa mebala, mela ea litafole kapa lisele tse ikemetseng.

Sehlopha Sehlooho Sehlooho
Ea kamehla Sele Sele
Ea mantlha Sele Sele
Ea bobeli Sele Sele
Katleho Sele Sele
Kotsi Sele Sele
Tlhokomediso Sele Sele
Info Sele Sele
Leseli Sele Sele
Lefifi Sele Sele
<!-- 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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hiddensehlopha.

Litafole tse phahamisitsoeng

Mela e methalo

Sebelisa .table-stripedho kenya liqoaha-striping moleng ofe kapa ofe oa tafole ka har'a <tbody>.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-striped">
  ...
</table>

Lihlopha tsena li ka eketsoa ho mefuta e fapaneng ea litafole:

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-success table-striped">
  ...
</table>

Hoverable mela

Eketsa .table-hoverho nolofalletsa boemo ba hover holim'a mela ea tafole ka har'a <tbody>.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-hover">
  ...
</table>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-dark table-hover">
  ...
</table>

Mela ena e ka holimo e ka kopanngoa le mefuta e meng ea mela:

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-striped table-hover">
  ...
</table>

Litafole tse sebetsang

Totobatsa mola oa tafole kapa sele ka ho eketsa .table-activesehlopha.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Litafole le litafole tsa accented li sebetsa joang?

Bakeng sa litafole tse hatisitsoeng ( mela e nang le metsero , mela e ka holimo , le litafole tse sebetsang ), re sebelisitse mekhoa e meng ho etsa hore liphello tsena li sebetse bakeng sa mefuta eohle ea litafole tsa rona :

  • Re qala ka ho beha bokamorao ba sele ea tafole e nang le --bs-table-bgthepa ea moetlo. Mefuta eohle ea litafole ebe e beha thepa eo e tloaelehileng ho etsa mebala ea lisele tsa tafole. Ka tsela ena, ha re kene mathateng haeba mebala e sa bonahaleng e sebelisoa e le semelo sa tafole.
  • Ebe re kenya moriti oa lebokose la inset holim'a lisele tsa tafole ka ho beha box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);holim'a ntho leha e le efe e boletsoeng background-color. Hobane re sebelisa sekhahla se seholo mme ha se na lefifi, 'mala o tla ba monotone. Kaha --bs-table-accent-bge sa hlophisoa ka ho sa feleng, ha re na moriti oa lebokose la kamehla.
  • Ha e 'ngoe ea .table-striped, .table-hoverkapa .table-activelitlelase li eketsoa, --bs-table-accent-bg​​​​e behiloe ho 'mala o semitransparent ho etsa mebala e ka morao.
  • Bakeng sa phapang e 'ngoe le e' ngoe ea tafole, re hlahisa --bs-table-accent-bg'mala o nang le phapang e phahameng ka ho fetisisa ho itšetlehile ka' mala oo. Mohlala, 'mala oa lentsoe o .table-primarylefifi ha .table-darko na le' mala o bobebe.
  • Mebala le mebala ea moeli li hlahisoa ka tsela e ts'oanang, 'me mebala ea tsona e futsitsoe ka mokhoa o tloaelehileng.

Ka mor'a lipapali e shebahala tjena:

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

Meeli ea litafole

Litafole tse moeling

Eketsa .table-borderedbakeng sa meeli ka mahlakoreng 'ohle a tafole le lisele.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-bordered">
  ...
</table>

Lisebelisoa tsa mebala ea moeli li ka eketsoa ho fetola mebala:

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Litafole tse se nang meeli

Eketsa .table-borderlessbakeng sa tafole ntle le meeli.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-borderless">
  ...
</table>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Litafole tse nyane

Eketsa .table-smho etsa hore ho be .tablethata ho feta ka ho khaola sele eohle paddingka halofo.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-sm">
  ...
</table>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-dark table-sm">
  ...
</table>

Tsepamiso e otlolohileng

Lisele tsa tafole <thead>li lula li theohile li le ka tlase. Lisele tsa tafole li <tbody>rua tekano ea tsona ho tloha <table>'me li hlophisitsoe ho ea holimo ka ho sa feleng. Sebelisa lihlopha tse otlolohileng ho ikamahanya hape moo ho hlokahalang.

Sehlooho sa 1 Sehlooho sa 2 Sehlooho sa 3 Sehlooho sa 4
Sele ena e rua vertical-align: middle;ho tloha tafoleng Sele ena e rua vertical-align: middle;ho tloha tafoleng Sele ena e rua vertical-align: middle;ho tloha tafoleng Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
Sele ena e rua vertical-align: bottom;ho tloha moleng oa tafole Sele ena e rua vertical-align: bottom;ho tloha moleng oa tafole Sele ena e rua vertical-align: bottom;ho tloha moleng oa tafole Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
Sele ena e rua vertical-align: middle;ho tloha tafoleng Sele ena e rua vertical-align: middle;ho tloha tafoleng Sele ena e ikamahanya le hodimo. Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
<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>

Nesting

Litaele tsa moeli, mekhoa e sebetsang, le mefuta e fapaneng ea litafole ha li futsoe ke litafole tse behiloeng.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
Hlooho Hlooho Hlooho
A Ea pele Qetellong
B Ea pele Qetellong
C Ea pele Qetellong
3 Larry Nonyana @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kamoo sehlaha se sebetsang kateng

Ho thibela mefuta efe kapa efe hore e se ke ea lutla ho litafole tse behiloeng, re sebelisa sekhetho sa bana ( >) ho CSS ea rona. Kaha re hloka ho shebisisa tsohle tds le ths ho thead, tbody, le tfoot, mokhethoa oa rona o tla shebahala a le telele haholo ntle le eona. Ka hona, re sebelisa sekhetho se shebahalang se sa tloaeleha ho shebisisa .table > :not(caption) > * > *tsohle tdtsa , empa thha .tableho le e 'ngoe ea litafole tse ka bang teng.

Hlokomela hore haeba u eketsa <tr>s joalo ka bana ba tafole ka kotloloho, bao ba <tr>tla koaheloa ka ho sa <tbody>feleng, ka hona ho etsa hore bakhethoa ba rona ba sebetse joalo ka ha ho reriloe.

Anatomy

Hlooho ea tafole

Joalo ka litafole le litafole tse lefifi, sebelisa litlelase tsa ho fetola .table-lightkapa .table-darkho etsa hore <thead>e bonahale e le bobebe kapa boputsoa bo lefifi.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Leoto la tafole

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
Botlase Botlase Botlase Botlase
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Litlhaloso

E <caption>sebetsa joalo ka sehlooho sa tafole. E thusa basebelisi ba nang le libali tsa skrine ho fumana tafole le ho utloisisa hore na e bua ka eng le ho etsa qeto ea hore na ba batla ho e bala.

Lenane la basebelisi
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

U ka boela ua beha <caption>ka holim'a tafole ka .caption-top.

Lenane la basebelisi
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Litafole tse arabelang

Litafole tse arabelang li lumella litafole ho tsamaisoa ka mokhoa o tšekaletseng habonolo. Etsa hore tafole efe kapa efe e arabele libakeng tsohle tsa pono ka ho phuthela .tableka .table-responsive. Kapa, ​​​​khetha sebaka se seholo seo u ka bang le tafole e arabelang ho fihlela ka ho sebelisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Keketso e emeng e otlolohileng

Litafole tse arabelang li sebelisa overflow-y: hidden, e tlosang litaba life kapa life tse fetang bokatlase kapa lipheletsong tse kaholimo tsa tafole. Haholo-holo, sena se ka fokotsa menyetla ea ho theoha le li-widget tse ling tsa motho oa boraro.

Kamehla e arabela

Hohle sebakeng se seng le se seng, sebelisa .table-responsivelitafole tse otlolohileng.

# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele Sele
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint e khethehileng

Sebelisa .table-responsive{-sm|-md|-lg|-xl|-xxl}kamoo ho hlokahalang ho theha litafole tse arabelang ho fihlela sebakeng se itseng. Ho tloha sebakeng seo ho ea holimo ho ea holimo, tafole e tla itšoara ka mokhoa o tloaelehileng 'me e se ke ea tsamaea e tšekaletse.

Litafole tsena li ka 'na tsa bonahala li robehile ho fihlela mekhoa ea bona ea ho arabela e sebetsa ho bophara bo itseng ba pono.

# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele
<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

Lintho tse fapaneng

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

Ho iketsetsa

  • Lintlha tse fapaneng ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) li sebelisoa ho fumana phapang pakeng tsa litafole.
  • Ntle le mefuta e fapaneng ea litafole tse bobebe le tse lefifi, mebala ea theme e ntlafatsoa ke $table-bg-levelmefuta e fapaneng.