Tables

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "mice/tables";

Base

<table>
  ...
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
#	First Name	Last Name	Username

Condensed table

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
#	First Name	Last Name	Username

Bordered table

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
#	First Name	Last Name	Username

Striped rows

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
#	First Name	Last Name	Username

Hover rows

<table class="hover">
  ...
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
#	First Name	Last Name	Username

Responsive tables

<div class="table responsive">
  <table>
    ...
  </table>
</div>

#	Table heading	Table heading	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	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	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	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	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	Table cell	Table cell

Contextual classes

<!-- On rows -->
<tr class="active">...</tr>
<tr class="primary">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="primary">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content