Financial services use tables a lot. Tables should only be used for rendering data that belongs naturally in a grid, in other words where the data describes a number of objects that have the same properties.
1.0.0

Basic table

Simple table structure without borders can be used when stretching edge to edge within a container.

Demo
loading example… 
<div class="table-responsive">
	<table class="table">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

LESS

The main mixin is called: _tables(WBC)

Striped row table

Style alternate rows to help with content scanning.

Demo
loading example… 
<div class="table-responsive">
	<table class="table table-striped">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-striped

LESS

The main mixin is called: _tables(WBC)

Bordered table

Outlines each cell. Use a bordered table if displaying lots of complex data e.g. spreadsheet style.

Demo
loading example… 
<div class="table-responsive">
	<table class="table table-bordered">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-bordered

LESS

The main mixin is called: _tables(WBC)

Bordered, striped table

Multiple classes can be added to tables.

Demo
loading example… 
<div class="table-responsive">
	<table class="table table-striped table-bordered">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier classes:
  • table-striped
  • table-bordered

LESS

The main mixin is called: _tables(WBC)

Basic table with highlights

Use highlights to call out specific cells in a table. They can be added to an individual cell, multiple cells or to an entire row.

Demo
loading example… 
<div class="table-responsive">
	<table class="table">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="table-highlight">YOUR TABLE CONTENT HIGHLIGHTED PER CELL</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr class="table-highlight">
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-highlight

LESS

The main mixin is called: _tables(WBC)
2.0.0

Basic table

Simple table structure without borders can be used when stretching edge to edge within a container.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

LESS

The main mixin is called: _tables(WBC)

Striped row table

Style alternate rows to help with content scanning.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table table-striped">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-striped

LESS

The main mixin is called: _tables(WBC)

Bordered table

Outlines each cell. Use a bordered table if displaying lots of complex data e.g. spreadsheet style.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table table-bordered">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-bordered

LESS

The main mixin is called: _tables(WBC)

Bordered, striped table

Multiple classes can be added to tables.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table table-striped table-bordered">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier classes:
  • table-striped
  • table-bordered

LESS

The main mixin is called: _tables(WBC)

Basic table with highlights

Use highlights to call out specific cells in a table. They can be added to an individual cell, multiple cells or to an entire row.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="table-highlight">YOUR TABLE CONTENT HIGHLIGHTED PER CELL</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr class="table-highlight">
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-highlight

LESS

The main mixin is called: _tables(WBC)
2.0.1

Basic table

Simple table structure without borders can be used when stretching edge to edge within a container.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The highlighting of the first cell would be cut off on mobile in bordered tables. We wanted to highlight that we fixed that. (#210)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

LESS

The main mixin is called: _tables(WBC)

Striped row table

Style alternate rows to help with content scanning.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The highlighting of the first cell would be cut off on mobile in bordered tables. We wanted to highlight that we fixed that. (#210)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table table-striped">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-striped

LESS

The main mixin is called: _tables(WBC)

Bordered table

Outlines each cell. Use a bordered table if displaying lots of complex data e.g. spreadsheet style.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The highlighting of the first cell would be cut off on mobile in bordered tables. We wanted to highlight that we fixed that. (#210)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table table-bordered">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-bordered

LESS

The main mixin is called: _tables(WBC)

Bordered, striped table

Multiple classes can be added to tables.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The highlighting of the first cell would be cut off on mobile in bordered tables. We wanted to highlight that we fixed that. (#210)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table table-striped table-bordered">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier classes:
  • table-striped
  • table-bordered

LESS

The main mixin is called: _tables(WBC)

Basic table with highlights

Use highlights to call out specific cells in a table. They can be added to an individual cell, multiple cells or to an entire row.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The highlighting of the first cell would be cut off on mobile in bordered tables. We wanted to highlight that we fixed that. (#210)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="table-responsive">
	<table class="table">
		<caption>
			YOUR TABLE CAPTION
		</caption>
		<thead>
			<tr>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
				<th scope="col">YOUR TABLE HEAD</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="table-highlight">YOUR TABLE CONTENT HIGHLIGHTED PER CELL</td>
				<td>YOUR TABLE CONTENT</td>
				<td>YOUR TABLE CONTENT</td>
			</tr>
			<tr class="table-highlight">
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
				<td>YOUR TABLE CONTENT HIGHLIGHTED PER ROW</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					YOUR TABLE FOOTER
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-highlight

LESS

The main mixin is called: _tables(WBC)