Our framework comes packed with a lot of table options variations.
To apply the basic table styling you need to add the .tableCSS class to any table element.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a condensed table add the .table-condensedCSS class to the .tablewrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a bordered table add the .table-borderedCSS class to the .tablewrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a striped-row table add the .table-stripedCSS class to the .tablewrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create hover table rows add the .table-hoverCSS class to the .tablewrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a basic responsive table wrap the .tableelement inside a div with the .table-responsiveCSS class.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
On the other hand, we denounce...
Dislike men who are so beguiled...
Of pleasure of the moment, so...
That they cannot foresee the...
Pain and trouble that are bound...
Equal blame belongs to those...
Weakness of will, which is same...
These cases are perfectly simple...
