For truly tabular data, use the <table>
tag and add the class .table
. The table element applies basic stying propeties and padding to the default <table>
element.
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
<table class="table">
<!--Table Head-->
<thead>
<!--Table Row-->
<tr>
<!--Table Head Cell-->
<th>
</th>
…
</tr>
</thead>
<!--Table Body-->
<tbody>
<!--Table Row-->
<tr>
<!--Table Cell-->
<td>
</td>
…
</tr>
…
</tbody>
</table>
Hover Rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
<table class="table table-hover">
…
</table>
Add .table-row-hover-disabled
to any <tr>
to disable the row hover behavior and styling.
Borderless Tables
Add .table-borderless
to remove the outer borders from the table.
Class |
Description |
.table-borderless |
Remove all table borders. |
.table-borderless-inner |
Remove all table inner borders. |
.table-borderless-inner-columns |
Remove all table inner vertical borders. |
.table-borderless-inner-rows |
Remove all table inner horizontal borders. |
.table-borderless-outer |
Remove all table outer borders. |
.table-borderless-outer-columns |
Remove all table outer vertical borders. |
.table-borderless-outer-rows |
Remove all table outer horizontal borders. |
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
<table class="table table-borderless-outer table-borderless-inner-columns">
…
</table>
Flush Tables
Add .table-flush
to remove the horizontal padding applied to the first and last cell of a table row.
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
<table class="table table-flush table-borderless-outer table-borderless-inner-columns">
…
</table>
Conditional Row States
Use contextual classes to color table rows or individual cells.
Class |
Description |
.selected |
Applies the hover color to a particular row or cell |
.success |
Indicates a successful or positive action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
<table class="table table-hover">
…
</table>
Inverse Styling
Add the class .table-inverse
to any .table
element to leverage inverse styling.
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
<table class="table table-inverse table-borderless-outer table-borderless-inner-columns">
…
</table>
Table Sizes
By default, tables display at a standard size. Additional sizes are available: small and large. Add classes .table-small
and .table-large
respectively to each table to adjust it’s size.
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
<table class="table table-small">
…
</table>
First Name
|
Last Name
|
Email
|
Commits
|
John
|
Ashenden
|
john.ashenden@domain.com
|
802
|
Michael
|
Lunøe
|
michael.lunoe@domain.com
|
2,401
|
Rafael
|
Corral
|
rafael.corral@domain.com
|
1,532
|
Jesse
|
Lash
|
jesse.lash@domain.com
|
104
|
<table class="table table-large">
…
</table>