Table te pawh a awm

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

Entirna te

Calendar leh date picker ang chi third-party widget hrang hranga table hman tam tak avang hian kan table te chu opt-in turin kan design a ni. Base class .tablechu any ah add mai la <table>, chutah chuan custom styles emaw kan modifier class hrang hrang included hmangin extend rawh.

Table markup bulpui ber hmangin, .tableBootstrap-a -based tables awm dan chu hetiang hi a ni. Table style zawng zawng hi Bootstrap 4 ah hian inherited a ni a , chu chu nested table eng pawh chu parent ang bawkin style a ni ang tihna 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	chu Sava chu a ni	@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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Chu bâkah, rawngte chu i invert thei bawk a—background dum-a thuziak eng tak tak hmangin—chu hmangin .table-dark.

# 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 table-dark">
  <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>

Table head thlan theih a ni

Table leh dark table ang bawkin modifier class .thead-lightemaw .thead-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

# 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="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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	chu Sava chu a ni	@twitter ah a awm

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

# 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 table-striped table-dark">
  <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>

Table border nei a ni

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

# 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-dark">
  <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>

Border nei lo table

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

.table-borderlessdark table-ah pawh hman 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-borderless table-dark">
  <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>

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

# 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-dark">
  <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>

Table te tak te

.table-smCell padding chu a chanvea then la, table compact zawka siam turin dah 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-sm">
  <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>

# 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-dark">
  <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>

Contextual class hrang hrang te

Table row emaw cell pakhat zel emaw color turin contextual class hmang ang che.

Pawl	Heading tih a ni	Heading tih a ni
Harhvang	Pindan	Pindan
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 rows -->
<tr class="table-active">...</tr>
<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-active">...</td>
  <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>

Dark table nen hian regular table background variant a awm lo a, mahse, style inang lo tak tak neih theih nan text emaw background utility emaw i hmang thei bawk.

# a ni.	Heading tih a ni	Heading tih a ni
1. a ni	Pindan	Pindan
2. 2.	Pindan	Pindan
3. A ni	Pindan	Pindan
4. 4.	Pindan	Pindan
5. 5.	Pindan	Pindan
6. 6.	Pindan	Pindan
7. 7.1	Pindan	Pindan
8. A ni	Pindan	Pindan
9. A ni	Pindan	Pindan

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyclass nena thup belh thuziak ang chi a ni.

Responsive table siam la, any .tablewith wrapping la, breakpoint .table-responsive{-sm|-md|-lg|-xl}tinah table chu horizontal-in max-width576px, 768px, 992px, leh 1120px thleng (mahse tel lovin) a scroll tir ang che.

Browser-te hian tunah hian range context queries an support loh avangin, heng tehkhin thute atan hian value dik zawk hmangin fractional width nei prefix min-lehmax- viewport-te limitation (chu chu high-dpi device-a condition thenkhat hnuaiah a thleng thei, entirnan) kan thawk ho tih hre reng ang che .

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	chu Sava chu a ni	@twitter ah a awm

<table class="table">
  <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}.

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

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