Tables

Tables provide customizable views of tabular data with features including sorting and managing columns. Tables are useful when a collection of data requires vertical alignment through columns for quick scanning and discovery of information, as well as for data that with many attributes that requires sorting, grouping, and a user customizable display.

Version 1.0

Basic Example of Module

Usage & Code Tips

@include title of mixin

@include title of mixin

@include title of mixin

Source code:

 

 

Basic Example Table

Version 1.0

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Usage & Code Tips

Use template: sg_tables_basic

Source code:

 

 

Striped Table

Version 1.0

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Usage & Code Tips

Use template: sg_tables_striped

Source code:

 

 

Bordered Table

Version 1.0

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Usage & Code Tips

Use template: sg_tables_bordered

Source code:

 

 

Hover Table

Version 1.0

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Usage & Code Tips

Use template: sg_tables_hover

Source code:

 

 

Condensed Table

Version 1.0

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Usage & Code Tips

Use template: sg_tables_condensed

Source code:

 

 

Contextual Classes

Use contextual classes to color table rows or individual cells.

Version 1.0

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content

Usage & Code Tips

.activeApplies the hover color to a particular row or cell

.successIndicates a successful or positive action

.infoIndicates a neutral informative change or action

.warningIndicates a warning that might need attention

.dangerIndicates a dangerous or potentially negative action

.table-responsiveto make tables scroll horizontally on small devices (under 768px).

Source code: