General
Table styles
Table styles
Examples of various designs of tables.For basic styling—light padding and only horizontal dividers—add the base class .table
to any <table>
. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
Name | Phone | Street Address | City | Country |
---|---|---|---|---|
Abraham | 076 9477 4896 | 294-318 Duis Ave | Vosselaar | Belgium |
Phelan | 0500 034548 | 680-1097 Mi Rd. | Lavoir | Pakistan |
Raya | (01315) 27698 | Ap #289-8161 In Avenue | Santomenna | Burkina Faso |
Azalia | 0500 854198 | 226-4861 Augue. St. | Newtown | Christmas Island |
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
Name | Phone | Street |
---|---|---|
Henry | Purus Gravida Sagittis Limited | 055 1753 4032 |
Shelly | Posuere Enim Inc. | 0313 143 2317 |
Edan | Quisque Imperdiet Company | 076 1743 8649 |
Sophia | Quam Incorporated | 0863 826 7513 |
Griffith | Tempor Erat Corp. | 0845 46 45 |
Shelly | Posuere Enim Inc. | 0313 143 2317 |
Add .table-bordered
for borders on all sides of the table and cells.
Name | Phone | Street Address | City | Country |
---|---|---|---|---|
Abraham | 076 9477 4896 | 294-318 Duis Ave | Vosselaar | Belgium |
Phelan | 0500 034548 | 680-1097 Mi Rd. | Lavoir | Pakistan |
Raya | (01315) 27698 | Ap #289-8161 In Avenue | Santomenna | Burkina Faso |
Azalia | 0500 854198 | 226-4861 Augue. St. | Newtown | Christmas Island |
Add .table-sm
to make tables more compact by cutting cell padding in half.
Name | Phone | Street |
---|---|---|
Henry | Purus Gravida Sagittis Limited | 055 1753 4032 |
Shelly | Posuere Enim Inc. | 0313 143 2317 |
Edan | Quisque Imperdiet Company | 076 1743 8649 |
Sophia | Quam Incorporated | 0863 826 7513 |
Griffith | Tempor Erat Corp. | 0845 46 45 |
Shelly | Posuere Enim Inc. | 0313 143 2317 |
Create responsive tables by adding .table-responsive
class to the table element to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden
, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |