in English

Dagiti Lamisaan

Dokumentasion ken dagiti pagarigan para iti opt-in nga estilo dagiti lamisaan (no maited ti nasaknap a panagusar kadagitoy kadagiti plugin ti JavaScript) babaen ti Bootstrap.

Iti daytoy a panid

Panangkita iti pakabuklan

Gapu ti nasaknap a panagusar kadagiti <table>elemento iti ballasiw dagiti maikatlo a partido a widget a kas dagiti kalendario ken dagiti agpili ti petsa, dagiti lamisaan ti Bootstrap ket opt-in . Inayon ti batayan a klase .tableiti ania man <table>, kalpasanna palawaen babaen dagiti pagpilianmi a klase ti mangbalbaliw wenno dagiti kostumbre nga estilo. Amin nga estilo ti lamisaan ket saan a natawid iti Bootstrap, kayatna a sawen nga ania man a naisanglad a lamisaan ket mabalin nga estilo nga agwaywayas manipud iti nagannak.

Babaen ti panagusar ti kaaduan a batayan a marka ti lamisaan, ditoy no kasano .tableti langa dagiti -based a lamisaan iti Bootstrap.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti Variante

Usaren dagiti klase ti konteksto tapno mangkolor kadagiti lamisaan, hilera ti lamisaan wenno indibidual a selula.

Klase	Paulo	Paulo
Default	Sellula	Sellula
Kangrunaan	Sellula	Sellula
Sekondaria	Sellula	Sellula
Balligi	Sellula	Sellula
Peggad	Sellula	Sellula
Pakdaar	Sellula	Sellula
Info nga	Sellula	Sellula
Silaw	Sellula	Sellula
Nasipnget	Sellula	Sellula

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

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .visually-hiddenklase.

Dagiti lamisaan nga addaan aksento

Dagiti garitgaritan a hilera

Usaren .table-stripeda manginayon ti zebra-striping iti ania man a hilera ti lamisaan iti uneg ti <tbody>.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti garitgaritan nga adigi

Usaren .table-striped-columnsa mangnayon iti zebra-striping iti aniaman a kolum ti lamisaan.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagitoy a klase ket mabalin pay a mainayon kadagiti variante ti lamisaan:

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti hoverable a hilera

Inayon .table-hovertapno mapalubosan ti estado ti hover kadagiti hilera ti lamisaan iti uneg ti maysa a <tbody>.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagitoy a hoverable a hilera ket mabalin pay a maitipon iti garitgaritan a hilera a variante:

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Aktibo nga mga lamisaan

I-highlight ti maysa a hilera ti lamisaan wenno selula babaen ti pananginayon iti .table-activeklase.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Kasano nga agtrabaho dagiti variant ken accented table?

Para kadagiti naaksento a lamisaan ( dagiti garitgaritan a hilera , dagiti garitgaritan nga adigi , dagiti mai- hoverable a hilera , ken dagiti aktibo a lamisaan ), nagusarkami kadagiti sumagmamano a tekniko tapno dagitoy nga epekto ket agtrabaho para kadagiti amin a variante ti lamisaanmi :

Mangrugitayo babaen ti panangisaad ti likudan ti maysa a selula ti lamisaan nga addaan iti --bs-table-bgkostumbre a sanikua. Amin a variante ti lamisaan ket kalpasanna ket mangikeddeng iti dayta a kostumbre a tagikua tapno mangkolor kadagiti selula ti lamisaan. Iti daytoy a wagas, saantayo a marigatan no dagiti semi-transparent a kolor ket mausar a kas dagiti likudan ti lamisaan.
Kalpasanna manginayontayo ti inset box shadow kadagiti selula ti lamisaan nga addaan iti box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer iti rabaw ti ania man a naikeddeng background-color. Gapu ta agusartayo iti dakkel a spread ken awan ti blur, monotone ti kolor. Gapu ta --bs-table-accent-bgsaan a naikeddeng babaen ti default, awan ti default a kahon nga anniniwantayo.
No ti urayno .table-striped, .table-striped-columns, .table-hoverwenno .table-activedagiti klase ket mainayon, ti --bs-table-accent-bgket naikeddeng iti semitransparent a kolor tapno mangkolor ti likudan.
Para iti tunggal maysa a variant ti lamisaan, mangpataudtayo ti --bs-table-accent-bgkolor nga addaan iti kangatuan a panagdumaduma depende iti dayta a kolor. Kas pagarigan, ti kolor ti aksento para .table-primaryket natayengteng bayat .table-darknga addaan iti nalaglag-an a kolor ti aksento.
Dagiti kolor ti teksto ken ti beddeng ket napataud iti isu met laeng a wagas, ken dagiti kolorda ket natawid babaen ti default.

Iti likudan ti eksena ket kastoy ti langana:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Dagiti beddeng ti lamisaan

Nabeddengan dagiti lamisaan

Inayon .table-borderedpara kadagiti beddeng iti amin a sikigan ti lamisaan ken selula.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Mabalin a mainayon dagiti utilidad ti kolor ti beddeng tapno agbaliw dagiti kolor:

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti lamisaan nga awanan kadagiti beddeng

Inayon .table-borderlesspara iti lamisaan nga awanan kadagiti beddeng.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Bassit a lamisaan

Inayon .table-smtapno agbalin nga .tablead-adda a kompakto babaen ti panangputed iti amin a selula paddingiti kagudua.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti mangbingay iti grupo ti lamisaan

Inayon ti napuspuskol a beddeng, nasipnget iti nagbaetan dagiti grupo ti lamisaan— <thead>, <tbody>, ken <tfoot>—nga addaan .table-group-divideriti . Ipasayaat ti kolor babaen ti panangbalbaliw ti border-top-color(a saanmi nga agdama nga ipaay ti klase ti utilidad para iti daytoy a panawen).

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

html nga

<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 class="table-group-divider">
    <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>

Bertikal a panagtunos

Dagiti selula ti lamisaan ti <thead>ket kanayon a bertikal a naitunos iti baba. Dagiti selula ti lamisaan iti <tbody>agtawid ti panagtunosda manipud <table>ken naitunosda iti ngato babaen ti default. Usaren dagiti bertikal a klase ti panagitunos tapno maitunos manen no sadino ti kasapulan.

Paulo 1	Paulo 2	Paulo 3	Paulo 4
Daytoy a selula ket agtawid `vertical-align: middle;`manipud iti lamisaan	Daytoy a selula ket agtawid `vertical-align: middle;`manipud iti lamisaan	Daytoy a selula ket agtawid `vertical-align: middle;`manipud iti lamisaan	Daytoy ditoy ket sumagmamano a teksto ti placeholder, a nairanta a mangala ti medyo bassit a bertikal nga espasio, tapno mangipakita no kasano nga agtrabaho ti bertikal a panagtunos kadagiti immun-una a selula.
Daytoy a selula ket agtawid `vertical-align: bottom;`manipud iti hilera ti lamisaan	Daytoy a selula ket agtawid `vertical-align: bottom;`manipud iti hilera ti lamisaan	Daytoy a selula ket agtawid `vertical-align: bottom;`manipud iti hilera ti lamisaan	Daytoy ditoy ket sumagmamano a teksto ti placeholder, a nairanta a mangala ti medyo bassit a bertikal nga espasio, tapno mangipakita no kasano nga agtrabaho ti bertikal a panagtunos kadagiti immun-una a selula.
Daytoy a selula ket agtawid `vertical-align: middle;`manipud iti lamisaan	Daytoy a selula ket agtawid `vertical-align: middle;`manipud iti lamisaan	Daytoy a selula ket naitunos iti ngato.	Daytoy ditoy ket sumagmamano a teksto ti placeholder, a nairanta a mangala ti medyo bassit a bertikal nga espasio, tapno mangipakita no kasano nga agtrabaho ti bertikal a panagtunos kadagiti immun-una a selula.

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

Panag-umok

Dagiti estilo ti beddeng, dagiti aktibo nga estilo, ken dagiti variante ti lamisaan ket saan a tawiden babaen dagiti naisanglad a lamisaan.

Umuna

Napalabas

Kutingen

1 nga

Marka

Otto ni Otto

@mdo nga

Ulo ti ulo	Ulo ti ulo	Ulo ti ulo
MAYSA	Umuna	Napalabas
B	Umuna	Napalabas
C	Umuna	Napalabas

Larry ni Larry

ti Tumatayab

@twitter nga

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

No kasano nga agtrabaho ti panagumok

Tapno malapdan ti ania man nga estilo manipud iti panagruar kadagiti naisanglad a lamisaan, usarenmi ti child combinator ( >) selector iti CSS-mi. Gapu ta kasapulantayo a puntiriaen amin dagiti tds ken ths iti thead, tbody, ken tfoot, ti selectortayo ket kasla medyo atiddog no awan daytoy. Kas kasta, usarenmi ti medio karkarna ti langana a .table > :not(caption) > * > *mangpili tapno puntiriaen amin tddagiti s ken ths ti .table, ngem awan kadagiti ania man a potensial a naisanglad a lamisaan.

Imutektekanyo a no manginayonka <tr>kadagiti s a kas direkta nga annak ti maysa a lamisaan, dagidiay <tr>ket mabalkot iti a <tbody>babaen ti default, iti kasta ket mangaramid kadagiti agpilitayo nga agtrabaho a kas nairanta.

Anatomia nga

Ulo ti lamisaan

Kasla dagiti lamisaan ken natayengteng a lamisaan, usaren dagiti klase ti mangbalbaliw .table-lightwenno .table-darktapno ti <thead>s ket agparang a nalawag wenno natayengteng nga abuabu.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Saka ti lamisaan

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga
Footer nga	Footer nga	Footer nga	Footer nga

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

Dagiti Kapsion

Ti A <caption>ket agtignay a kas ti paulo para iti maysa a lamisaan. Tulonganna dagiti agus-usar nga addaan kadagiti screen reader a mangbirok iti lamisaan ken maawatanda no ania ti maipapan iti dayta ken mangikeddeng no kayatda a basaen dayta.

Listaan dagiti agar-aramat
#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Mabalinmo met nga ikabil ti <caption>iti ngato ti lamisaan nga addaan iti .caption-top.

Listaan dagiti agar-aramat
#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

html nga

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

Dagiti sumungsungbat a lamisaan

Dagiti makasungbat a lamisaan ket mangipalubos kadagiti lamisaan a mai-scroll a paidasig a nalaka. Pagbalinen ti ania man a lamisaan a makasungbat iti ballasiw dagiti amin a viewport babaen ti panangbalkot ti maysa .tablenga addaan .table-responsive. Wenno, mangpili ti kangatuan a breakpoint a pakaaddaan iti makasungbat a lamisaan aginggana babaen ti panangusar iti .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Bertikal a panagputed/pannakaputed

Dagiti makasungbat a lamisaan ket agus-usar ti overflow-y: hidden, a mang-clip off ti ania man a linaon a lumablabas iti baba wenno ngato nga igid ti lamisaan. Nangnangruna, daytoy ket mabalinna nga i-clip off dagiti dropdown a menu ken dagiti dadduma pay a third-party a widget.

Kanayon a makasungbat

Iti ballasiw ti tunggal breakpoint, usaren .table-responsivepara kadagiti horizontal a panag-scroll kadagiti lamisaan.

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

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

Breakpoint nga espesipiko

Usaren .table-responsive{-sm|-md|-lg|-xl|-xxl}no kasapulan tapno mangpartuat kadagiti sumungbat a lamisaan aginggana ti partikular a breakpoint. Manipud iti dayta a breakpoint ken agpangato, normal ti panagtignay ti lamisaan ken saan nga ag-scroll a horizontal.

Dagitoy a lamisaan ket mabalin nga agparang a nadadael aginggana dagiti sumungbat nga estiloda ket agaplikar kadagiti espesipiko a kalawa ti viewport.

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

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

Dagiti 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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Silo

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

Panag-customize

Dagiti variable ti factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ket naus-usar a mangikeddeng ti panagdumaduma kadagiti variante ti lamisaan.
Malaksid kadagiti light & dark table variants, dagiti kolor ti tema ket nalag-an babaen ti $table-bg-scalevariable.