Tables

Because tables are often used for elements like calendars, date pickers and other widgets, you must use the Table class on a <table> element to opt in to what might appear to be reasonable "default" styles.

By default it is not responsive, because the best responsive solution for tables is often very content-dependent. See modifiers below for available options.

# Item Starting Wattage Running Wattage
1 Heat Pump 2,000 1,000
2 Microwave 0 1,000
3 Clothes Dryer 1,350 5,400
4 Sump Pump 1,300 800
Totals 4,650 8,200
<table class="Table ">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Item</th>
      <th scope="col">Starting Wattage</th>
      <th scope="col">Running Wattage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Heat Pump</td>
      <td>2,000</td>
      <td>1,000</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Microwave</td>
      <td>0</td>
      <td>1,000</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Clothes Dryer</td>
      <td>1,350</td>
      <td>5,400</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Sump Pump</td>
      <td>1,300</td>
      <td>800</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <th scope="row">Totals</th>
      <td>4,650</td>
      <td>8,200</td>
    </tr>
  </tfoot>
</table>

The Table--sheer modifier class will remove padding from the leftmost and rightmost cells so the content runs up against the table edge. This is useful when you want the table text to align with adjacent headings or copy.

# Item Starting Wattage Running Wattage
1 Heat Pump 2,000 1,000
2 Microwave 0 1,000
3 Clothes Dryer 1,350 5,400
4 Sump Pump 1,300 800
Totals 4,650 8,200

Add subtle "zebra" stripes to alternating rows of a table with the Table--striped modifier class.

# Item Starting Wattage Running Wattage
1 Heat Pump 2,000 1,000
2 Microwave 0 1,000
3 Clothes Dryer 1,350 5,400
4 Sump Pump 1,300 800
Totals 4,650 8,200

Table--centerColumnsAfterFirst left aligns the first column and centers the rest. This can be helpful when displaying product details or comparisons.

Item Starting Wattage Running Wattage
Heat Pump 2,000 1,000
Microwave 0 1,000
Clothes Dryer 1,350 5,400
Sump Pump 1,300 800
Totals 4,650 8,200

You can add vertical borders to table cells with the Table--verticalDividers modifier.

# Item Starting Wattage Running Wattage
1 Heat Pump 2,000 1,000
2 Microwave 0 1,000
3 Clothes Dryer 1,350 5,400
4 Sump Pump 1,300 800
Totals 4,650 8,200

Sometimes it's helpful to prevent table headings (ths) from breaking into multiple lines. This can be achieved with the Table--noWrapHeaders modifier.

Using this modifier increases the chance of your table breaking on small screens so it should only be used in conjunction with one of the responsive solutions below.

# Item Starting Wattage Running Wattage
1 Heat Pump 2,000 1,000
2 Microwave 0 1,000
3 Clothes Dryer 1,350 5,400
4 Sump Pump 1,300 800
Totals 4,650 8,200

For tables that are primarily row-based (with th[scope="row"] elements describing each row's content), the Table--responsiveRows modifier hides any <thead> elements in an accessible way and stacks content at smaller viewport widths.

Note that at smaller sizes Table--striped will not take effect as it conflicts with the stacked appearance.

Spec Details
Running Wattage 1200 Watts
Starting Wattage 1500 Watts
Engine 80cc Champion 4-Stroke OHV
<table class="Table Table--responsiveRows Table--striped">
  <thead>
    <tr>
      <th>Spec</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Running Wattage</th>
      <td>1200 Watts</td>
    </tr>
    <tr>
      <th scope="row">Starting Wattage</th>
      <td>1500 Watts</td>
    </tr>
    <tr>
      <th scope="row">Engine</th>
      <td>80cc Champion 4-Stroke OHV</td>
    </tr>
  </tbody>
</table>

Another responsive option is to wrap the table in our Horizontal Scroll Container pattern

(To see this in action, reduce the width of your browser window.)

# Item Starting Wattage Running Wattage
1 Heat Pump 2,000 1,000
2 Microwave 0 1,000
3 Clothes Dryer 1,350 5,400
4 Sump Pump 1,300 800
Totals 4,650 8,200

You can combine different table modifiers to build some complex table interfaces. Here's an example combining the striped, centerColumnsAfterFirst and verticalDividers modifiers in a Horizontal Scroll Container.

Some combinations will work better than others, so it's important to test different combinations before using them.

First 5 hr. Weekly Monthly Every 2 yr. or 100 hr.
Change engine oil ✕**
Check engine oil* ✕*
Inspect fuel lines/connections
Check exterior fault code indicator
Inspect/clean enclosure louvers
Inspect/clean battery terminals
Inspect/clean engine air cleaner** ✕**
Inspect spark plug
Complete inspection and tune-up*** ✕***