Tables

Fannypack lovers
#	First name	Last name	Role
1	Gwendolyn	Matthys	Visual designer
2	Yannick	Van Avermaet	Frontend Architect
3	Jochen	Vandendriessche	Frontend developer
4	Gregory	Van Looy	Frontend developer

<table class="table">
	<caption>Fannypack lovers</caption>
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First name</th>
			<th scope="col">Last name</th>
			<th scope="col">Role</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Gwendolyn</td>
			<td>Matthys</td>
			<td>Visual designer</td>
		</tr>
		...
	</tbody>
</table>

Selector / Attribute		Description
`<th scope="col">`	Required	For a11y
`<th scope="row">`	Required	For a11y. `<td>` with `scope=""` is obsolete in HTML5. Only use it on `th`. If the first cell of your row doesn't have a scope relation to the other cells, use `td` without `scope`

Borders everywhere

Fannypack lovers
ID	First name	Last name	Role
1	Gwendolyn	Matthys	Visual designer
2	Yannick	Van Avermaet	Frontend Architect
3	Jochen	Vandendriessche	Frontend developer
4	Gregory	Van Looy	Frontend developer

<table class="table table--bordered">
	...
</table>

Only horizontal borders

Fannypack lovers
#	First name	Last name	Role
1	Gwendolyn	Matthys	Visual designer
2	Yannick	Van Avermaet	Frontend Architect
3	Jochen	Vandendriessche	Frontend developer
4	Gregory	Van Looy	Frontend developer

<table class="table table--horizontal-borders">
	...
</table>

Striped

Fannypack lovers
#	First name	Last name	Role
1	Gwendolyn	Matthys	Visual designer
2	Yannick	Van Avermaet	Frontend Architect
3	Jochen	Vandendriessche	Frontend developer
4	Gregory	Van Looy	Frontend developer

<table class="table table--striped">
	...
</table>

Simple tables with key - value pairs

Sometimes all you need to display is a table with some key-value pairs as data. With .key or scope="row" you can emphasize the key. If you need extra styling for the value , just add .value to that cell.

ID	12345
Last change	Not saved yet
Status	Draft

<tr>
	<td class="key">Last change</td>
	<td class="value"><em>Not saved yet</em></td>
</tr>
<!-- or -->
<tr>
	<th scope="row">Status</th>
	<td>Draft</td>
</tr>

Condensed tables

Table cells with less spacing

Fannypack lovers
#	First name	Last name	Role
1	Gwendolyn	Matthys	Visual designer
2	Yannick	Van Avermaet	Frontend Architect
3	Jochen	Vandendriessche	Frontend developer
4	Gregory	Van Looy	Frontend developer

<table class="table table--condensed table--bordered">
	...
</table>

Responsive tables

Making a table responsive (with overflow) is very easy. Just add a div.table__wrapper around the table. If the content or the vast number of cells don’t fit the container, you get horizontal scrollbars. This is done with overflow.

Resize your browser to see the result.

Standard Responsive table
#	table heading	table heading	table heading	table heading	table heading	table heading	table heading	table heading	table heading	table heading
1	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell
2	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell
3	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell
4	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell
5	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell
6	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell	table cell

<div class="table__wrapper">
	<table class="table table--bordered">
		...
	</table>
</div>

Selector		Description
`.table__wrapper`	Required	Wrapping `div` that adds horizontal scrollbars with `overflow-x: auto`

Transforming responsive table

On smaller screens the table transforms to blocks that are stacked and with accessible titles.

This requires a little more work than just CSS. You need to add the required attributes to make this work and be accessible.

Transforming responsive table
#	First name	Last name	Role
1	Gwendolyn	Matthys	Visual designer
2	Yannick	Van Avermaet	Frontend Architect
3	Jochen	Vandendriessche	Frontend developer
4	Gregory	Van Looy	Frontend developer

<table class="table table--bordered table--transformer">
	<caption>Transforming responsive table</caption>
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First name</th>
			<th scope="col">Last name</th>
			<th scope="col">Role</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row" data-title="No.">1</th>
			<td data-title="First name">Gwendolyn</td>
			<td data-title="Last name">Matthys</td>
			<td data-title="Role">Visual designer</td>
		</tr>
		...
	</tbody>
</table>

Selector / Attribute		Description
`.table--transformer`	Required	Modifier class
`data-title=""`	Required	Creates a label for the corresponding value. Needs to be the same as the matching `th`