Tables

Jump to section: Default Styles, Theme Table Colors, Pre-defined Table Color Schemes, Scrollable Tables, Text Alignment, Column Widths, and Responsive.

Default Styles

Tables will have a very sparse appearance without any css. To create a basic table, use .table and .table_theme-default for a simple gray theme. The value assigned to $default-text-color is used for the --emphasize version of cells and rows.

To dull the appearance of a cell or row (as in the case of representing the content as disabled or hidden), add --dull to rows or individual cells. To emphasize a row or cell, add --emphasize. In both cases you will use the standard version of the class (like .table__cell) in addition to the modifier class (.table__cell--dull).

Default
Col Header	Col Header
First row
.table__row--dull
	.table__cell--dull
.table__row--emphasize
	.table__cell--emphasize
Last Row

<table class="table table_theme-default">	
	<caption class="table__caption">Caption Text</caption>
	<thead class="table__header">
		<tr>
			<th class="table__heading">Column Heading</th>
		</tr>
	</thead>
	<tbody class="table__body">
		<tr class="table__row">
			<td class="table__cell">Cell Text</td>
		</tr>
		<tr class="table__row table__row--dull">
			<td class="table__cell table__cell--dull">Cell Text</td>
		</tr>
		<tr class="table__row table__row--emphasize">
			<td class="table__cell table__cell--emphasize">Cell Text</td>
		</tr>
	</tbody>		
</table>

Theme Table Colors

Setting the following values in the theme file can create a custom themed table on the fly. Additional colors are created based on a few variables fed into some sass color functons. These variables are:

$table-caption-bg
$table-caption-color
$table-header-bg
$table-header-color
$table-dull

$table-row-even
$table-row-odd
$table-heading-border
$table-cell-border
$table-emphasize

Generated Theme
Column Header	Column Header
row 1 cell 1	row 1 cell 2
row 2 cell 1	row 2 cell 2

<table class="table table_theme-generated">	
	<!-- content as usual -->
</table>

The tables below features two style choices, .table_theme-generated--lined and .table_theme-generated--alternate for alternating row background colors. They can be used together or individually, and implementing at least one of them is recommended for usability. Dull and emphasis colors are not recommended on alternate background-color tables.

Lined
Column Header	Column Header
Regular row & cell
Dull row
	Dull cell
Emphasize row
	Emphasize cell

Alternate
Column Header	Column Header
row 1 cell 1	row 1 cell 2
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2

<table class="table table_theme-generated table_theme-generated--lined table_theme-generated--alternate">	
	<!-- both -->
</table>

<table class="table table_theme-generated table_theme-generated--lined">
	<!-- lined only -->
</table>

<table class="table table_theme-generated table_theme-generated--alternate">	
	<!-- alternate only -->
</table>

Pre-defined Table Color Schemes

Be sure to limit the number of different table color classes used in a project, and to use classes that work well with the projects' overall theme. All classes have an optional lined variant, like .table_theme-mint--lined.

rose
.table_theme-rose
Odd row	-
Even row	-
-	-
-	-

buttermilk
.table_theme-buttermilk
Odd row	-
Even row	-
-	-
-	-

lime
.table_theme-lime
Odd row	-
Even row	-
-	-
-	-

mint
.table_theme-mint
Odd row	-
Even row	-
-	-
-	-

sky
.table_theme-sky
Odd row	-
Even row	-
-	-
-	-

aegean
.table_theme-aegean
Odd row	-
Even row	-
-	-
-	-

periwinkle
.table_theme-periwinkle
Odd row	-
Even row	-
-	-
-	-

taffy
.table_theme-taffy
Odd row	-
Even row	-
-	-
-	-

garnet
.table_theme-garnet
Odd row	-
Even row	-
-	-
-	-

gold
.table_theme-gold
Odd row	-
Even row	-
-	-
-	-

moss
.table_theme-moss
Odd row	-
Even row	-
-	-
-	-

pine
.table_theme-pine
Odd row	-
Even row	-
-	-
-	-

ocean
.table_theme-ocean
Odd row	-
Even row	-
-	-
-	-

navy
.table_theme-navy
Odd row	-
Even row	-
-	-
-	-

eggplant
.table_theme-eggplant
Odd row	-
Even row	-
-	-
-	-

jam
.table_theme-jam
Odd row	-
Even row	-
-	-
-	-

Scrollable Tables

Scrollable methods can be used normally by wrapping the entire table in a div with the scrollable classes (from either basic or advanced solutions). The downside is the the head of the table will be hidden as the user scrolls down; the solutions below are for when fixing the table head is desireable. Since these methods require splitting the head and body into two tables, they are unfortunately incompatible with tools like tablesorter.

Basic

A simple version that requires some modifications to a traditional HTML table. This method utilizes the basic version of scrollable introduced in Nitro 1.0.

To start, split the table into two. Both tables will require any theme classes on the <table> tag. Whatever column-width-# class is set on the th in the head portion should also be set on the first (at least) td in the corresponding body portion.

There may be accessibility consequences to this method. No longer recommended without deeper investigation.

Lastly, wrap the body table in a div with .scrollable-# like normal. Ta da! Now you have scrollable table with a fixed header.

ID	Name	Username

1	Leanne Graham	Bret
2	Ervin Howell	Antonette
3	Clementine Bauch	Samantha
4	Patricia Lebsack	Karianne
5	Chelsey Dietrich	Kamren
6	Mrs. Dennis Schulist	Leopoldo_Corkery
7	Kurtis Weissnat	Elwyn.Skiles
8	Nicholas Runolfsdottir V	Maxime_Nienow
9	Glenna Reichert	Delphine
10	Clementina DuBuque	Moriah.Stanton

<table class="table">
	<thead class="table__header">
		<tr>
			<th class="table__heading table__column-width-3">
				ID
			</th>
			<th class="table__heading table__column-width-6">
				Name
			</th>
			<th class="table__heading">
				Username
			</th>
		</tr>
	</thead>
</table>

<div class="scrollable-#">
	<table class="table">
		<tbody class="table__body">
			<tr class="table__row">
				<td class="table__cell table__column-width-3">
					123
				</td>
				<td class="table__cell table__column-width-6">
					Leanne R
				</td>
				<td class="table__cell">
					lennieg
				</td>
			</tr>
		</tbody>
	</table>
</div>

Advanced

Toggles shadows depending on the position of the scroll bar. Requires additional markup and accompanying javascript. See Scrollable for more information.

As with the basic version, begin by splitting the table into two, one for the table head and one for the table content. Column heads and their correspond table cells should have matching .column-width-# definitions.

The structure around the body for scrollable will differ from the basic implementation. As with normal scrollable on tables, the class defining the max-height and overflow must be on a div wrapping the table (.scrollable__container-# or .scrollable-###). The table should have an additional class .scrollable-content for the the javascript to determine the height and width of the scrollable area.

ID	Name	Username

1	Leanne Graham	Bret
2	Ervin Howell	Antonette
3	Clementine Bauch	Samantha
4	Patricia Lebsack	Karianne
5	Chelsey Dietrich	Kamren
6	Mrs. Dennis Schulist	Leopoldo_Corkery
7	Kurtis Weissnat	Elwyn.Skiles
8	Nicholas Runolfsdottir V	Maxime_Nienow
9	Glenna Reichert	Delphine
10	Clementina DuBuque	Moriah.Stanton

<div class="scrollable">
	<div class="scrollable__shadow scrollable__shadow-top"></div>
	<div class="scrollable__container-8">
		<table class="table scrollable__content">
			<tbody class="table__body">
				<tr class="table__row">
					<td class="table__cell table__column-width-3">
						123
					</td>
					<td class="table__cell table__column-width-6">
						Leanne R
					</td>
					<td class="table__cell">
						lennieg
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="scrollable__shadow scrollable__shadow-bottom"></div>
</div>

Trials & Tribulations

Tables with multiple columns with unspecified widths may not line up correctly (see example to the right). For best results define all but the last column width with .table__column-width-#.

ID	Name	Username

1	Leanne Graham	Bret
2	Ervin Howell	Antonette
3	Clementine Bauch	Samantha
4	Patricia Lebsack	Karianne
5	Chelsey Dietrich	Kamren
6	Mrs. Dennis Schulist	Leopoldo_Corkery
7	Kurtis Weissnat	Elwyn.Skiles
8	Nicholas Runolfsdottir V	Maxime_Nienow
9	Glenna Reichert	Delphine
10	Clementina DuBuque	Moriah.Stanton

Text Alignment

All text in a table is aligned left by default. To modify, place classes .text_align-center and .text_align-right on the section you want to affect (i.e. the whole table, a row, a cell, etc.).

To center an icon, use .table__icon on the svg.

Text Alignment
.text_align-center	Heading	Heading
.text_align-right	Data	Data	2435345
Data	Data	Data	2435345

Text Alignment
.text_align-right	Heading	Heading	Heading
.text_align-center	Data	Data	2435345
Data	Data	Data	2435345

<!-- align all text center -->
<table class="text_align-center">
	<!-- align column header text center -->
	<thead class="text_align-center">
		<tr>
			<th>Column Text</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<!-- align cell text right -->
			<td class="text_align-right">Cell text</td>
		</tr>				
	</tbody>
</table>

Column Widths

To set explicit column widths, place .table__column-width-# on the first row of th's (or td's), where ## is 1 and 20. The number corresponds to the value of the typographic rhythm multipled by the corresponding value. If more precise values are required, chances are custom css is a better option. Leave at least one column with no width set for best responsive results./p>

default
heading	heading	heading
cell	cell	cell

first and last column set
-3	heading	-6
cell	cell	cell

<thead>
	<tr>
		<th class="table__column-width-1">
			heading
		</th>
		<th>heading</th>
		<th>heading</th>
	</tr>		
</thead>

Responsive Tables

To make a table responsive, the html in the table will need to be altered slightly. Then in Sass, you'll need to target the table by id or class and include the mixin table--mobile(). Because every table is unique, there's no way to create a custom "responsive" class that would work in all cases.

The mixin table--mobile() can accept a parameters for label width. This value may vary depending on the length of the labels and ensures consistant text alignment for easy table reading.

/* css with sass mixin */
#responsive-table-demo {
	@media screen and (max-width: 1500px) { 
		@include table--mobile(6rem);
	}
}

In each cell, wrap a label (should match the corresponding column header), in a div with class .mobile-table__cell-label. Labels are optional, like in the case of a group of buttons. Wrap the rest of the cell content in a div with class .mobile-table__cell-content. By default the content will be in column two, but this can be modified with custom css, as with the example below and the edit button (its container spans both columns).

Table with HTML Required for Responsive Mode
ID #	Name	Place
ID # 05486	Name John S. Doe	Address 406 Technology Dr W, Menomonie, WI
ID # 05486	Name John S. Doe	Address 406 Technology Dr W, Menomonie, WI
ID # 05486	Name John S. Doe	Address 406 Technology Dr W, Menomonie, WI

Responsive mode invoked
ID #	Name	Place
ID # 05486	Name John S. Doe	Address 406 Technology Dr W, Menomonie, WI
ID # 05486	Name John S. Doe	Address 406 Technology Dr W, Menomonie, WI
ID # 05486	Name John S. Doe	Address 406 Technology Dr W, Menomonie, WI

<!-- html -->
<table id="responsive-table-demo" class="table table_theme-sky table_theme-sky--lined">
	<thead class="table__header">
		<!-- column headings -->
	</thead> 
	<tbody class="table__body">
		<tr class="table__row">
			<td class="table__cell">
				<div class="mobile-table__cell-label">ID #</div>
				<div class="mobile-table__cell-content">05486</div>
			</td>
			<td class="table__cell">
				<div class="mobile-table__cell-label">Name</div>
				<div class="mobile-table__cell-content">
					John S. Doe
				</div>
			</td>
			<td class="table__cell">
				<div class="mobile-table__cell-label">Address</div>
				<div class="mobile-table__cell-content">
					406 Technology Dr W, Menomonie, WI
				</div>
			</td>
			<td class="table__cell">
				<div class="mobile-table__cell-content">
					<!-- buttons -->
				</div>
			</td>			
		</tr>				
	</tbody>
</table>