Tables - Sizing
Table sizing Additional table cell sizing.
Example of
extra large table sizing using .table-xlg class added to the .table. All table rows have 60px height.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Example of
large table sizing using .table-lg class added to the .table. All table rows have 50px height.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Example of
default table sizing. This table doesn;t require any additional classes using in the table with .table class. All table rows have 44px height.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Example of
small table sizing using .table-sm class added to the .table. All table rows have 40px height.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Example of
mini table sizing using .table-xs class added to the .table. All table rows have 36px height. This table size also has an alias - Bootstrap's condensed table available via .table-condensed class.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Example of
extra mini table sizing using .table-xxs class added to the .table. All table rows have 32px height.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Column sizing Column sizing based on 12 columns grid.
In this table all columns have percentage based widths. These width options are based on 12 columns mobile first responsive grid system, accessible via default Bootstrap column classes -
col-*-*, where the first option is screen size (xs, sm, md, lg), second option is column width (1 - 12). To use, just add one of these classes to any <th> or <td> element.
| Name | Position | Office | Start date | Salary |
|---|---|---|---|---|
| Airi Satou (33) | Accountant | Tokyo | 2008/11/28 | $162,700 |
| Ashton Cox (66) | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
| Brielle Williamson (61) | Integration Specialist | New York | 2012/12/02 | $372,000 |
| Cedric Kelly (22) | Senior Javascript Developer | Edinburgh | 2012/03/29 | $433,060 |