Tables

By default I've tried to make the tables as responsive as possible but this will depend on how many columns your table has and what content is inside it. I'm still working on a proper fix for this so stay tuned.

Examples

Default table

This is how the default table will look when you add the table class.

Item Name Inventory Item Price Action
Fender Squier Affinity Telecaster 9 £187.00
Fender Dreadnought Cutaway 3 £109.00
Oypla ST 23 £61.99
Default Default table
<table class="table">
    <thead>
        <tr>
		<th>Item Name</th>
		<th>Inventory</th>
		<th>Item Price</th>
		<th>Action</th>
	</tr>
    </thead>
    <tbody>
	<tr>
		<td data-label="Item Name">Fender Squier Affinity Telecaster</td>
		<td data-label="Inventory">9</td>
		<td data-label="Item Price">£187.00</td>
		<td data-label="Action"><button class="btn btn-danger">View</button></td>
	</tr>
	<tr>
		<td data-label="Item Name">Fender Dreadnought Cutaway</td>
		<td data-label="Inventory">3</td>
		<td data-label="Item Price">£109.00</td>
		<td data-label="Action"><button class="btn">View</button></td>
	</tr>
	<tr>
		<td data-label="Item Name">Oypla ST</td>
		<td data-label="Inventory">23</td>
		<td data-label="Item Price">£61.99</td>
		<td data-label="Action"><button class="btn btn-info">View</button></td>
	</tr>
    </tbody>
</table>

Striped Table

A little zebra stripe pattern for your tables.

Item Name Inventory Item Price Action
Fender Squier Affinity Telecaster 9 £187.00
Fender Dreadnought Cutaway 3 £109.00
Oypla ST 23 £61.99
Default Striped Table
<table class="table table-striped">
    <thead>
        <tr>
		<th>Item Name</th>
		<th>Inventory</th>
		<th>Item Price</th>
		<th>Action</th>
	</tr>
    </thead>
    <tbody>
	<tr>
		<td data-label="Item Name">Fender Squier Affinity Telecaster</td>
		<td data-label="Inventory">9</td>
		<td data-label="Item Price">£187.00</td>
		<td data-label="Action"><button class="btn btn-danger">View</button></td>
	</tr>
	<tr>
		<td data-label="Item Name">Fender Dreadnought Cutaway</td>
		<td data-label="Inventory">3</td>
		<td data-label="Item Price">£109.00</td>
		<td data-label="Action"><button class="btn">View</button></td>
	</tr>
	<tr>
		<td data-label="Item Name">Oypla ST</td>
		<td data-label="Inventory">23</td>
		<td data-label="Item Price">£61.99</td>
		<td data-label="Action"><button class="btn btn-info">View</button></td>
	</tr>
    </tbody>
</table>