Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Examples
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in . Just add the base class .table
to any <table>
, then extend with custom styles or our various included modifier classes.
Using the most basic table markup, here’s how .table
-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4 , meaning any nested tables will be styled in the same manner as the parent.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Copy
<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>
You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Copy
<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 options
Similar to tables and dark tables, use the modifier classes .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Copy
<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 rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Copy
<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>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Copy
<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>
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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>
Borderless table
Add .table-borderless
for a table without borders.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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-borderless
can also be used on dark tables.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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>
Small table
Add .table-sm
to make tables more compact by cutting cell padding in half.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Copy
<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 classes
Use contextual classes to color table rows or individual cells.
Class
Heading
Heading
Active
Cell
Cell
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
ሓደጋ
ዋህዮ
ዋህዮ
ምኸዳን
ዋህዮ
ዋህዮ
ሓበሬታ
ዋህዮ
ዋህዮ
ብርሃን
ዋህዮ
ዋህዮ
ፀልማት
ዋህዮ
ዋህዮ
ቅዳሕ
<!-- 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>
ስሩዕ ናይ ሰደቓ ድሕረ ባይታ ፍልልያት ምስቲ ጸሊም ሰደቓ ኣይርከቡን እዮም፣ ይኹን እምበር፣ ተመሳሳሊ ቅዲታት ንምዕዋት ጽሑፍ ወይ ድሕረ ባይታ ውጽኢታት ክትጥቀም ትኽእል ኢኻ።
#
ኣርእስቲ
ኣርእስቲ
1.
ዋህዮ
ዋህዮ
2.
ዋህዮ
ዋህዮ
3.
ዋህዮ
ዋህዮ
4.
ዋህዮ
ዋህዮ
5.
ዋህዮ
ዋህዮ
6.
ዋህዮ
ዋህዮ
7.
ዋህዮ
ዋህዮ
8.
ዋህዮ
ዋህዮ
9.
ዋህዮ
ዋህዮ
ቅዳሕ
<!-- 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>
ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ
ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .sr-only
ክፍሊ ዝተሓብአ።
.table
ዝኾነ ምስ ብምጥቕላል ምላሽ ዝህቡ ሰደቓታት ፍጠር .table-responsive{-sm|-md|-lg|-xl}
፣ እቲ ሰደቓ ኣብ ነፍሲ ወከፍ max-width
ነጥቢ ምብታኽ ክሳብ (ግን ከይሓወሰ) ብቕደም ተኸተል ብኣግማድ ክሽክርከር ምግባር።
መግለጺ ጽሑፍ
A <caption>
ከም ርእሲ ሰደቓ ኮይኑ ይሰርሕ። ስክሪን ሪደር ዘለዎም ተጠቀምቲ ሰደቓ ንኽረኽቡን ብዛዕባ እንታይ ምዃኑ ንኽርድኡን ከንብብዎ እንተደልዮም ንኽውስኑን ይሕግዞም።
ዝርዝር ተጠቀምቲ
#
መጀመርታ
መጨረሻ
ኣካይድ
1.
ማርክ
ኦቶ
@mdo ዝብል ጽሑፍ ኣሎ።
2.
ያእቆብ
ቶርንተን ዝበሃል ትካል
@ረጒድ
3.
ላሪ
እታ ዑፍ
@twitter ዝብል ጽሑፍ ኣሎ።
ቅዳሕ
<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>
ምላሽ ዝህቡ ሰደቓታት
ምላሽ ዝህቡ ሰደቓታት ሰደቓታት ብቐሊሉ ብኣግማድ ንኽንቀሳቐሱ የኽእሉ። ዝኾነ ሰደቓ ኣብ ኩሉ ቪውፖርትታት ምላሽ ዝህብ ግበሮ a .table
with ብምጥቕላል .table-responsive
። ወይ ድማ፡ ብመገዲ ምላሽ ዝህብ ሰደቓ ክሳብ ዝህልወካ ዝለዓለ ናይ ምብታኽ ነጥቢ ምረጽ .table-responsive{-sm|-md|-lg|-xl}
።
ቀጥ ዝበለ ምቑራጽ/ምቑራጽ
ምላሽ ዝህቡ ሰደቓታት ን , ይጥቀሙ overflow-y: hidden
፣ እዚ ድማ ንዝኾነ ካብ ታሕተዋይ ወይ ላዕለዋይ ወሰናት ናይቲ ሰደቓ ዝሓልፍ ትሕዝቶ ይቖርጾ። ብፍላይ እዚ ንቑልቁል ዝወርድ ምልክታታትን ካልኦት ናይ ሳልሳይ ወገን ዊጀታትን ክቖርጾም ይኽእል።
ኩሉ ግዜ ምላሽ ዝህብ
ኣብ ነፍሲ ወከፍ ነጥቢ ምብታኽ .table-responsive
፡ ንኣግማድ ምዝዋር ሰደቓታት ተጠቐም።
#
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
ኣርእስቲ
1.
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
2.
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
3.
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ዋህዮ
ቅዳሕ
<div class= "table-responsive" >
<table class= "table" >
...
</table>
</div>
ፍሉይ ነጥቢ ምብታኽ
Use .table-responsive{-sm|-md|-lg|-xl}
as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
These tables may appear broken until their responsive styles apply at specific viewport widths.
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Copy
<div class= "table-responsive-sm" >
<table class= "table" >
...
</table>
</div>
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Copy
<div class= "table-responsive-md" >
<table class= "table" >
...
</table>
</div>
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Copy
<div class= "table-responsive-lg" >
<table class= "table" >
...
</table>
</div>
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Copy
<div class= "table-responsive-xl" >
<table class= "table" >
...
</table>
</div>