Horizontal Scroll Container

Default

The Horizontal Scroll Container pattern can be used to help contain content that is too wide for its container. It is especially useful for making wide, rigid content like tables more responsive.

It adds a horizontal scrollbar, as well as visual affordances to indicate the ability to scroll.

(To see this in action you may need to reduce the width of your browser viewport.)

First 5 hr. Every Use Weekly Monthly Every 2 yr. or 100 hr. Critical
Change engine oil ✕ ✕** ✕
Check engine oil* ✕* ✕ 
<div class="HorizontalScrollContainer js-HorizontalScrollContainer ">
  <div class="HorizontalScrollContainer-content js-HorizontalScrollContainer-content">
    <table class="
      Table Table--verticalDividers
      Table--centerColumnsAfterFirst Table--noWrapHeaders
    ">
      <thead>
        <th></th>
        <th scope="col">First 5 hr.</th>
        <th scope="col">Every Use</th>
        <th scope="col">Weekly</th>
        <th scope="col">Monthly</th>
        <th scope="col">Every 2 yr. or 100 hr.</th>
        <th scope="col">Critical</th>
      </thead>
      <tbody>
        <tr>
          <td>Change engine oil</td>
          <td>✕</td>
          <td></td>
          <td></td>
          <td></td>
          <td>✕**</td>
          <td>✕</td>
        </tr>
        <tr>
          <td>Check engine oil*</td>
          <td></td>
          <td></td>
          <td></td>
          <td>✕*</td>
          <td></td>
          <td>✕</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Colored Backgrounds

If a horizontal scroll container is within a container with a colored background, that same colored background should be applied to the container via a utility class.

First 5 hr. Every Use Weekly Monthly Every 2 yr. or 100 hr. Critical
Change engine oil ✕ ✕** ✕
Check engine oil* ✕* ✕ 
<div class="u-pad u-bgGray">

  <div class="HorizontalScrollContainer js-HorizontalScrollContainer u-bgGray">
    <div class="HorizontalScrollContainer-content js-HorizontalScrollContainer-content">
      <table class="
      Table Table--verticalDividers
      Table--centerColumnsAfterFirst Table--noWrapHeaders
    ">
        <thead>
          <th></th>
          <th scope="col">First 5 hr.</th>
          <th scope="col">Every Use</th>
          <th scope="col">Weekly</th>
          <th scope="col">Monthly</th>
          <th scope="col">Every 2 yr. or 100 hr.</th>
          <th scope="col">Critical</th>
        </thead>
        <tbody>
          <tr>
            <td>Change engine oil</td>
            <td>✕</td>
            <td></td>
            <td></td>
            <td></td>
            <td>✕**</td>
            <td>✕</td>
          </tr>
          <tr>
            <td>Check engine oil*</td>
            <td></td>
            <td></td>
            <td></td>
            <td>✕*</td>
            <td></td>
            <td>✕</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>