Tables

# Intro

Tables are classless by default.

Episode	Title	Release Date
IV	A New Hope	May 25, 1977
V	The Empire Strikes Back	May 21, 1980
VI	Return of the Jedi	May 25, 1983

<table>
	<thead>
		<tr>
			<th>Episode</th>
			<th>Title</th>
			<th>Release Date</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>IV</td>
			<td>A New Hope</td>
			<td>May 25, 1977</td>
		</tr>
		<tr>
			<td>V</td>
			<td>The Empire Strikes Back</td>
			<td>May 21, 1980</td>
		</tr>
		<tr>
			<td>VI</td>
			<td>Return of the Jedi</td>
			<td>May 25, 1983</td>
		</tr>
	</tbody>
</table>

# Striped

Use the -striped modifier to add zebra-striping to rows.

Episode	Title	Release Date
IV	A New Hope	May 25, 1977
V	The Empire Strikes Back	May 21, 1980
VI	Return of the Jedi	May 25, 1983

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

# Hover

Use the -hover modifier to add a hover style to rows.

Episode	Title	Release Date
IV	A New Hope	May 25, 1977
V	The Empire Strikes Back	May 21, 1980
VI	Return of the Jedi	May 25, 1983

<table class="-hover">
	<thead>
		...
	</thead>
	<tbody>
		...
	</tbody>
</table>

# Bordered

Use the -bordered modifier to add borders on the table and cells.

Episode	Title	Release Date
IV	A New Hope	May 25, 1977
V	The Empire Strikes Back	May 21, 1980
VI	Return of the Jedi	May 25, 1983

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

# Colors

Use the -primary, -success, -warning, -danger, -dark, and -light modifiers to style any table child. The -dark modifier can be added to the table.

Class	Heading	Heading
Primary	Cell	Cell
Success	Cell	Cell
Warning	Cell	Cell
Danger	Cell	Cell
Light	Cell	Cell

<table class="-hover">
	<thead>
		<tr class="-dark">
			<th>Class</th>
			<th>Heading</th>
			<th>Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr class="-primary">
			<td>Primary</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

Episode	Title	Release Date
IV	A New Hope	May 25, 1977
V	The Empire Strikes Back	May 21, 1980
VI	Return of the Jedi	May 25, 1983

<table class="-dark -striped -hover">
	<thead>
		...
	</thead>
	<tbody>
		...
	</tbody>
</table>

# Scrollable

To make a table responsive and to make it scrollable on overflow, wrap the table in a table-scrollable container.

Episode	Title	Duration	Release Date	Director	Producer
IV	A New Hope	121 minutes	May 25, 1977	George Lucas	Gary Kurtz
V	The Empire Strikes Back	124 minutes	May 21, 1980	Irvin Kershner	Gary Kurtz
VI	Return of the Jedi	132 minutes	May 25, 1983	Richard Marquand	Howard Kazanjian

<div class="table-scrollable">
	<table>
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>