Tables

Default

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>

Sheer

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

Striped

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

Center Columns After First

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

Vertical Dividers

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

No Wrap Headers

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

Responsive Rows

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>

Horizontal Overflow

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

Compact

The Table--compact modifier class will reduce padding on table cells so that tables can fit into tight spaces.

The compact modifier uses em units instead of rem units. This leads to less padding on small screens or when the table uses a small font size.

# 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

Combinations

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*** ✕***