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.

Tables

1.0.0

Basic table

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

Demo
<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(STG)

Striped row table

Style alternate rows to help with content scanning.

Demo
<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(STG)

Bordered table

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

Demo
<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(STG)

Bordered, striped table

Multiple classes can be added to tables.

Demo
<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(STG)

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
<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(STG)
2.0.0

Basic table

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

Demo

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(STG)

Striped row table

Style alternate rows to help with content scanning.

Demo

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(STG)

Bordered table

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

Demo

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(STG)

Bordered, striped table

Multiple classes can be added to tables.

Demo

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(STG)

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 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(STG)
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(STG)

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(STG)

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(STG)

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(STG)

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(STG)
2.0.2

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.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

Striped row table

Style alternate rows to help with content scanning.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

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.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

Bordered, striped table

Multiple classes can be added to tables.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

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.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)
2.0.3

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.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

Striped row table

Style alternate rows to help with content scanning.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

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.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

Bordered, striped table

Multiple classes can be added to tables.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)

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.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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(STG)
2.0.4

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.3

This version changed: CSS/LESS but not: HTML, JS
  • Removed row hover styling for .table-striped tables. The row hover background colour fill is provided to help when scanning across the row, but striped tables provide this anyway without hovering. (#377)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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>
			{TABLE_CAPTION}
		</caption>
		<thead>
			<tr>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					{TABLE_FOOTER}
				</td>
			</tr>
		</tfoot>
	</table>
</div>

LESS

The main mixin is called: _tables(STG)

Striped row table

Style alternate rows to help with content scanning.

Demo

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Removed row hover styling for .table-striped tables. The row hover background colour fill is provided to help when scanning across the row, but striped tables provide this anyway without hovering. (#377)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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>
			{TABLE_CAPTION}
		</caption>
		<thead>
			<tr>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					{TABLE_FOOTER}
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-striped

LESS

The main mixin is called: _tables(STG)

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.3

This version changed: CSS/LESS but not: HTML, JS
  • Removed row hover styling for .table-striped tables. The row hover background colour fill is provided to help when scanning across the row, but striped tables provide this anyway without hovering. (#377)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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>
			{TABLE_CAPTION}
		</caption>
		<thead>
			<tr>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					{TABLE_FOOTER}
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-bordered

LESS

The main mixin is called: _tables(STG)

Bordered, striped table

Multiple classes can be added to tables.

Demo

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Removed row hover styling for .table-striped tables. The row hover background colour fill is provided to help when scanning across the row, but striped tables provide this anyway without hovering. (#377)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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>
			{TABLE_CAPTION}
		</caption>
		<thead>
			<tr>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
			<tr>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					{TABLE_FOOTER}
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier classes:
  • table-striped
  • table-bordered

LESS

The main mixin is called: _tables(STG)

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.3

This version changed: CSS/LESS but not: HTML, JS
  • Removed row hover styling for .table-striped tables. The row hover background colour fill is provided to help when scanning across the row, but striped tables provide this anyway without hovering. (#377)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Re-mapped BT brand’s table header border colour (previous variable is deprecated) (#370)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The striped styling option for tables has been modified to start on the second, rather than first, row of the table body. (#314)

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>
			{TABLE_CAPTION}
		</caption>
		<thead>
			<tr>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
				<th scope="col">{TABLE_HEAD}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="table-highlight">{TABLE_CONTENT_HIGHLIGHTED_PER_CELL}</td>
				<td>{TABLE_CONTENT}</td>
				<td>{TABLE_CONTENT}</td>
			</tr>
			<tr class="table-highlight">
				<td>{TABLE_CONTENT_HIGHLIGHTED_PER_ROW}</td>
				<td>{TABLE_CONTENT_HIGHLIGHTED_PER_ROW}</td>
				<td>{TABLE_CONTENT_HIGHLIGHTED_PER_ROW}</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					{TABLE_FOOTER}
				</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS

Modifier class:
  • table-highlight

LESS

The main mixin is called: _tables(STG)