Skip to content Skip to main navigation Report an accessibility issue

Tables with Horizontal Scrolling

Documentation

Usage: Large tables may not fit on small screens. While it is best to keep your data simple, sometimes it is necessary to scroll on small screens.

Example

Optional table caption.
# First Name Last Name Username Email Address Favorite Spot
1 Samuel Carrick @firstprez example@example.com Carrick Hall
2 Jenny Armstrong @dontmess example@example.com Ampitheater
3 Barbara blount @oldskool example@example.com The Hill

Code

HTML
<div class="table-responsive">
<table class="table-striped">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>Email Address</th>
      <th>Favorite Spot</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Samuel </td>
      <td>Carrick</td>
      <td>@firstprez</td>
      <td>example@example.com</td>
      <td>Carrick Hall</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jenny</td>
      <td>Armstrong</td>
      <td>@dontmess</td>
      <td>example@example.com</td>
      <td>Ampitheater</td>
    </tr>
    <tr>
    <th scope="row">3</th>
      <td>Barbara</td>
      <td>blount</td>
      <td>@oldskool</td>
      <td>example@example.com</td>
      <td>The Hill</td>
    </tr>
  </tbody>
</table>
</div>
Available as a shortcode in the WordPress theme
[table-wrap bordered="false" striped="true" hover="false" responsive="true"] ... table code ... [/table-wrap]