Table te pawh a awm

Bootstrap hmanga table-te opt-in styling (JavaScript plugin-a an hman tam dan ngaihtuah chuan) documentation leh entirnan.

He page ah hian

A tlangpuiin

Calendar leh date picker ang chi third-party widget hrang hranga element hman tam tak avang hian <table>Bootstrap-a table-te chu opt-in a ni . Base class .tablechu any -ah dah la <table>, chutah chuan kan optional modifier class emaw custom style emaw hmangin extend rawh. Table style zawng zawng hi Bootstrap ah hian inherited a ni lo a, chu chu nested table eng pawh chu parent atanga innghat lovin style theih a ni tihna a ni.

Table markup bulpui ber hmangin, .tableBootstrap-a -based tables awm dan chu hetiang hi a ni.

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

<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 te pawh a awm

Table, table row emaw cell pakhat zel emaw color siam nan contextual class hmang thin ang che.

Pawl	Heading tih a ni	Heading tih a ni
Hlawhchhamna	Pindan	Pindan
Hmasa ber	Pindan	Pindan
Secondary lam a ni	Pindan	Pindan
Hlawhtling	Pindan	Pindan
Hlauhawm	Pindan	Pindan
Vaulawkna	Pindan	Pindan
Info	Pindan	Pindan
Eng	Pindan	Pindan
Thim	Pindan	Pindan

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

Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.

Accented table te pawh a awm

Striped row hrang hrang a awm

.table-stripedA chhunga table row eng pawhah zebra-striping dah belh nan hmang ang che <tbody>.

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Striped column hrang hrang a awm

.table-striped-columnsTable column eng pawhah zebra-striping dah belh nan hmang ang che .

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Heng class te hi table variant ah te pawh dah theih a ni:

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Hoverable rows a awm bawk

.table-hoverA chhunga table row hrang hranga hover state enable turin Add rawh <tbody>.

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Heng hoverable rows te hi striped rows variant nen pawh a inzawm thei bawk:

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Table active tak tak te

.table-activeTable row emaw cell emaw chu class dah belhin highlight rawh .

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Engtin nge variant leh accented table te hian hna an thawh?

Accented tables ( striped rows , striped columns , hoverable rows , leh active tables ) te tan chuan kan table variant zawng zawng tan heng effects te hi a thawk thei turin technique thenkhat kan hmang a :

Table cell pakhat background chu --bs-table-bgcustom property hmangin kan set tan a. Chumi hnuah chuan table variant zawng zawng chuan chu custom property chu table cells te colorize turin an set vek a. Hetiang hian semi-transparent color te chu table background atan hman a nih chuan harsatna kan tawk lo.
Tichuan table cells ah inset box shadow kan dah a, box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer kan dah a, chu chu eng specified ah pawh kan dah a background-colorni. Spread lian tak leh blur kan hman loh avangin a rawng chu monotone a ni ang. Default-a unset a nih avangin --bs-table-accent-bgdefault box shadow kan nei lo.
.table-striped, .table-striped-columns, emaw class emaw a dah .table-hoverchuan background chu colorize turin semitransparent color-ah dah a ni..table-active--bs-table-accent-bg
Table variant tin atan chuan --bs-table-accent-bgchu color a zirin contrast sang ber color kan siam thin. Entirnan, accent color for .table-primarychu a dum zawk laiin .table-darkaccent color lighter zawk a nei thung.
Text leh border color te chu a inang vek a, an color te chu default in inherited a ni.

A hnung lamah chuan hetiang hian a lang:

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

Table border te a awm

Border nei table te pawh a awm

.table-borderedTable leh cell sir zawng zawnga border awmte tan add rawh .

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Border color utilities te pawh dah belh theih a ni a, color thlak theih a ni:

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Table te chu border nei lo

.table-borderlessTable border nei lo tan chuan add rawh .

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Table te te te te

Cell zawng zawng chu a chanvea then la , a compact lehzual .table-smtheih nan dah rawh ..tablepadding

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

Table group hrang hranga then dan

<thead>Table group— , <tbody>, leh <tfoot>—with inkarah border thuk zawk, dum zawk dah belh rawh .table-group-divider. border-top-color(tunah chuan tun dinhmunah chuan utility class kan pe lo) thlakin color chu customize rawh.

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

html tih a ni

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

Vertical alignment a awm bawk

Table cells of <thead>te chu a hnuai lam hawiin vertical aligned an ni fo thin. Table cell te hian <tbody>an alignment chu an inherit <table>a, default in chung lamah an align thin. A tulna hmunah re-align turin vertical align class te hmang ang che .

Thupui 1-na a ni	Thupui 2-na	Thupui 3-na	Thupui 4-na a ni
He cell hian `vertical-align: middle;`table atang hian a inherit thin	He cell hian `vertical-align: middle;`table atang hian a inherit thin	He cell hian `vertical-align: middle;`table atang hian a inherit thin	Hetah hian placeholder text thenkhat, vertical space tlemte luah tura ruahman, a hmaa cell-a vertical alignment hnathawh dan entir nan a ni.
He cell hian `vertical-align: bottom;`table row atang hian a inherit thin	He cell hian `vertical-align: bottom;`table row atang hian a inherit thin	He cell hian `vertical-align: bottom;`table row atang hian a inherit thin	Hetah hian placeholder text thenkhat, vertical space tlemte luah tura ruahman, a hmaa cell-a vertical alignment hnathawh dan entir nan a ni.
He cell hian `vertical-align: middle;`table atang hian a inherit thin	He cell hian `vertical-align: middle;`table atang hian a inherit thin	He cell hi a chung lamah a inrem a.	Hetah hian placeholder text thenkhat, vertical space tlemte luah tura ruahman, a hmaa cell-a vertical alignment hnathawh dan entir nan a ni.

<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 tih a ni

Border style, active style, leh table variant te hi nested table te hian an inherit lo.

# a ni.

Hmasa ber

Hnuhnung ber

Chelh

1. a ni

Mark

Otto chuan a ti a

@mdo a ni

Header a ni	Header a ni	Header a ni
ANI	Hmasa ber	Hnuhnung ber
B	Hmasa ber	Hnuhnung ber
C. a ni	Hmasa ber	Hnuhnung ber

3. A ni

Larry chuan a ti a

chu Sava chu a ni

@twitter ah a awm

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

Nesting hnathawh dan

Nested table-a style eng pawh leak loh nan >kan CSS-ah hian child combinator ( ) selector kan hmang a. , , leh -a tds leh s zawng zawng kan target vek a ngai avangin kan selector chu a tel lo chuan a sei hle ang. Chutiang a nih avang chuan, a s leh s zawng zawng target turin rather odd looking selector kan hmang a , mahse potential nested table pakhat mah kan target lo.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>Table pakhata direct child anga s i dah chuan chu chu default <tr>-in a-ah a wrapped ang tih hre reng ang che <tbody>, chutiang chuan kan selector-te chu a tum angin a thawk thei ang.

Anatomy tih a ni

Table lu a ni

Table leh dark table ang bawkin modifier class .table-lightemaw .table-darkhmang la, <thead>s chu light emaw dark gray emaw angin a lang thei ang.

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

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

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

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

Table ke a awm

# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm
A hnuai lam	A hnuai lam	A hnuai lam	A hnuai lam

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

Caption te pawh a awm

A <caption>hian table pakhata heading ang maiin a thawk a. Screen reader neitute chu table zawng chhuakin a chungchang an hriatthiam theih nan leh chhiar duh leh duh loh an rel theih nan a pui a ni.

A hmangtute list
# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

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

<caption>Table chung lamah pawh .caption-top.

A hmangtute list
# a ni.	Hmasa ber	Hnuhnung ber	Chelh
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

html tih a ni

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

Chhanna pe thei table te

Responsive table hmang hian awlsam takin table te chu horizontal-a scroll theih a ni. Viewport zawng zawngah table eng pawh responsive turin siam la, a .tablewith wrapping hmangin siam rawh .table-responsive. A nih loh leh, responsive table neih theihna tur breakpoint tam ber thlang la, hmangin .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertical clipping/truncation tih a ni

Responsive tables make use of overflow-y: hidden, chu chuan table hnuai lam emaw, chunglam emaw atanga chhuak content eng pawh a clip off thin. A bik takin hei hian dropdown menu leh third-party widget dangte a clip off thei a ni.

A chhang let fo thin

Breakpoint tinah, .table-responsivetable horizontal-a scroll nan hmang ang che.

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

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

Breakpoint bik a ni

.table-responsive{-sm|-md|-lg|-xl|-xxl}Breakpoint bik thlenga responsive table siam nan a tul angin hmang ang che. Chu breakpoint atang chuan a chung lam atang chuan table chu a awm dan pangngaiin a awm ang a, horizontal-in a scroll lo vang.

Heng table te hi an responsive style te chu viewport width bik a apply hma loh chuan broken angin a lang thei.

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

# a ni.	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
2. 2.	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan
3. A ni	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan	Pindan

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

Variables te pawh a awm

$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%;

Suih

$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 a ni

Table variant-a contrast awm dan hriat nan factor variable ( $table-striped-bg-factor, $table-active-bg-factor& ) te hi hman a ni.$table-hover-bg-factor
Light & dark table variant tih lohah chuan theme color te hi $table-bg-scalevariable hian a ti light zawk bawk.