Tables

Tables can be very malleable. The base of our tables uses the table class with various modifiers.

Default Table

The Schema tables are light on styling, but heavy on looks.

EXAMPLE

Item	Taste	Total
Burrito	Awesome	$6.00
Thai	Such Awesome	$12.00
Pizza	Much Awesome	$17.00

<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Taste</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Burrito</th>
      <td>Awesome</th>
      <td>$6.00</th>
    </tr>
    <tr>
      <td>Thai</th>
      <td>Such Awesome</th>
      <td>$12.00</th>
    </tr>
    <tr>
      <td>Pizza</th>
      <td>Much Awesome</th>
      <td>$17.00</th>
    </tr>
  </tbody>
</table>

Hover Table Rows

Add the class table-hover to highlight rows on hover.

EXAMPLE

Item	Taste	Total
Burrito	Awesome	$6.00
Thai	Such Awesome	$12.00
Pizza	Much Awesome	$17.00

<table class="table table-hover">
  …
</table>

Striped Table

Add the class table-stripe for stripes.

EXAMPLE

Item	Taste	Total
Burrito	Awesome	$6.00
Thai	Such Awesome	$12.00
Pizza	Much Awesome	$17.00

<table class="table table-stripe">
  …
</table>

Border Table

Add the class table-bordered for a bordered table.

EXAMPLE

Item	Taste	Total
Burrito	Awesome	$6.00
Thai	Such Awesome	$12.00
Pizza	Much Awesome	$17.00

<table class="table table-bordered">
  …
</table>

Modifier Classes

Here are the classes you can use to modify the rows.

Class	Description
`is-success`	Adds the success color to the table row
`is-primary`	Adds the primary color to the table row
`is-info`	Adds the info color to the table row
`is-warning`	Adds the warning color to the table row
`is-danger`	Adds the danger color to the table row

Table Modifiers

Use these classes to add color meanings to your tr

EXAMPLE

Item	Taste	Total
Burrito	Awesome	$6.00
Thai	Such Awesome	$12.00
Pizza	Much Awesome	$17.00

<tr class="is-danger">
  …
</tr>

Class
This is success!
This is primary!
This is info!
This is warning!
This is danger!