Tables

Basic Table

A basic Famous UI table.

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 

<table class="fui-table">
			<thead>
					<tr>
							<th>Firstname</th>
							<th>Lastname</th>
							<th>Email</th>
					</tr>
			</thead>
			<tbody>
					<tr>
							<td>John</td>
							<td>Doe</td>
							<td>john@example.com</td>
					</tr>
					<tr>
							<td>Mary</td>
							<td>Moe</td>
							<td>mary@example.com</td>
					</tr>
					<tr>
							<td>July</td>
							<td>Dooley</td>
							<td>july@example.com</td>
					</tr>
			</tbody>
			</table>

Striped Rows

The .table-striped class adds zebra-stripes to a table.

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 

<table class="fui-table table-striped">
			<thead>
					<tr>
							<th>Firstname</th>
							<th>Lastname</th>
							<th>Email</th>
					</tr>
			</thead>
			<tbody>
					<tr>
							<td>John</td>
							<td>Doe</td>
							<td>john@example.com</td>
					</tr>
					<tr>
							<td>Mary</td>
							<td>Moe</td>
							<td>mary@example.com</td>
					</tr>
					<tr>
							<td>July</td>
							<td>Dooley</td>
							<td>july@example.com</td>
					</tr>
			</tbody>
			</table>

Extra Info

To make table responsive simply wrap table inside .table-fluid container.

<div class="table-fluid">
			<table class="table">
					.........
			</table>
			</div>