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!