Source

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>

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.

# 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
2. 2. Pindan Pindan Pindan Pindan Pindan
3. A ni 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
1. a ni Pindan Pindan Pindan Pindan Pindan
2. 2. Pindan Pindan Pindan Pindan Pindan
3. A ni 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
1. a ni Pindan Pindan Pindan Pindan Pindan
2. 2. Pindan Pindan Pindan Pindan Pindan
3. A ni 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
1. a ni Pindan Pindan Pindan Pindan Pindan
2. 2. Pindan Pindan Pindan Pindan Pindan
3. A ni 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>