#### Tables

All Boostrap classes for tables are supported and improved.

Table of Contents

- Examples
  1. Basic Table
  2. Hoverable Table
  3. Striped Rows
  4. Table Head States
  5. Bordered Table
  6. Responsive Table

#### Examples

##### Basic Table

This is the basic table view of the ready dashboard :

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

##### Hoverable Table

Add a `.table-hover` for Hoverable Table

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-hover">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

##### Striped Rows

Add `.table-striped` to rows the striped table

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-striped">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

Add `.table-striped-bg-*states` to change background from striped rows

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-striped table-striped-bg-default mb-3">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

    									<table class="table table-striped table-striped-bg-danger mt-4">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

##### Table Head States

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-head-bg-success mb-3">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>
    									<table class="table table-head-bg-primary">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

##### Bordered Table

Add `.table-bordered` to create a bordered table

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-bordered">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

You can also add `.table-bordered-bd-*states` to change the border color of the table

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-bordered table-bordered-bd-warning mt-4">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

It can also add `.table-head-bg-*states` so that the table header has the same color as the border color of the table

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    									<table class="table table-bordered table-head-bg-info table-bordered-bd-info">
    										<thead>
    											<tr>
    												<th scope="col">#</th>
    												<th scope="col">First</th>
    												<th scope="col">Last</th>
    												<th scope="col">Handle</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<td>1</td>
    												<td>Mark</td>
    												<td>Otto</td>
    												<td>@mdo</td>
    											</tr>
    											<tr>
    												<td>2</td>
    												<td>Jacob</td>
    												<td>Thornton</td>
    												<td>@fat</td>
    											</tr>
    											<tr>
    												<td>3</td>
    												<td colspan="2">Larry the Bird</td>
    												<td>@twitter</td>
    											</tr>
    										</tbody>
    									</table>

##### Responsive Table

Create responsive tables by wrapping any table with `.table-responsive` `DIV` to make them scroll horizontally on small devices

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

    								<div class="table-responsive">
    									<table class="table table-bordered">
    										<thead>
    											<tr>
    												<th>#</th>
    												<th>Table heading</th>
    												<th>Table heading</th>
    												<th>Table heading</th>
    												<th>Table heading</th>
    												<th>Table heading</th>
    												<th>Table heading</th>
    											</tr>
    										</thead>
    										<tbody>
    											<tr>
    												<th scope="row">1</th>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    											</tr>
    											<tr>
    												<th scope="row">2</th>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    											</tr>
    											<tr>
    												<th scope="row">3</th>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    												<td>Table cell</td>
    											</tr>
    										</tbody>
    									</table>
    								</div>