Table sizing
Extra large table
Basic table with
.table-xlg class.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |
Large table
Basic table with
.table-lg class.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |
Small table
Basic table with
.table-sm class.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |
Small table (Condensed)
Basic table with
.table-condensed class.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |
Extra small table
Basic table with
.table-xxs class.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |
Columns grid sizing
Basic table with percentage based width for all columns, based on 12 column bootstrap grid system. Using class
.col-*-*, where first option is screen size (eg. lg, md, sm, xs) and the second option is grid size (eg. 1-12). Add .col-*-* class to any <td> element.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |