Flex UI Library (1.6.10)
User Interface Resources
Theme
Colors Icons Layout Typography
Components
Avatars Banners Buttons & Links Cards Charts Containers Dropdowns Forms Headers Listing Card Lists Modals & Dialogs Most Used Selector Navs Pages Panel Layout Popovers Progress Rental Calendar Tables Toast Tooltips & Labels Wells
Miscellaneous
Bugsnag Chart.js Cookie Banner Current User iOS Dynamic Type js-cookie Perfect Scrollbar Utilities Responsive Side Navigation Bar
Exploratory Components
Miscellaneous
Feature Examples
Address Search Contact Management Mobile Price Range 1 Price Range 2 Responsive Hot Sheet Responsive Layout
Product Marketing
Licensed Photos - [new window] Screenshot Library
Tools & Reference
Debug Tips
Tables
Standard Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
This is a table footer - pagination, help text, etc. 

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">This is a table footer - pagination, help text, etc.</td>
    </tr>
  </tfoot>
</table>
Card Table

Non-scrollable. Just add two wrappers.

Note: If the window is too small for the table, the background will separate. You can prevent that by adding overflow: auto to the .c-card-table-inner-wrapper div, but that will prevent dropdown menus that are inside the table from extending below it.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<div class="c-container--canvas">

  <div class="c-card-table-outer-wrapper">
    <div class="c-card-table-inner-wrapper">
      <table class="table c-card-table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>

          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>

          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>

</div>

Scrollable with a fixed column. Add a third wrapper, and add the class c-card-table-fixed-col to the last column.

Id First Name Last Name Username Favorite Color Favorite Tree
1 Judith Sheindlin @judgejudy Green Oak
2 Joe Brown @judgejoebrown Blue Maple
3 Edward Reinhold @judgereinhold Red Palm 

<div class="c-container--canvas">

  <div class="c-card-table-outer-wrapper">
    <div class="c-card-table-inner-wrapper">
      <div class="c-card-table-scroller">
        <table class="table c-card-table">

          <thead>
            <tr>
              <th>Id</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
              <th>Favorite Color</th>
              <th>Favorite Tree</th>
              <th class="c-card-table-fixed-col"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Judith</td>
              <td>Sheindlin</td>
              <td>@judgejudy</td>
              <td>Green</td>
              <td>Oak</td>
              <td class="c-card-table-fixed-col">
                <div class="dropdown">
                  <button class="btn btn-icon--sm" type="button" data-toggle="dropdown" aria-label="Actions">
                    <span class="flexicon flexicon-ellipsis"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right">
                    <li> <a href="">Thing One</a> </li>
                    <li> <a href="">Thing Two</a> </li>
                    <li> <a href="">Thing Three</a> </li>
                  </ul>
                </div>
              </td>
            </tr>

            <tr>
              <th scope="row">2</th>
              <td>Joe</td>
              <td>Brown</td>
              <td>@judgejoebrown</td>
              <td>Blue</td>
              <td>Maple</td>
              <td class="c-card-table-fixed-col">
                <div class="dropdown">
                  <button class="btn btn-icon--sm" type="button" data-toggle="dropdown" aria-label="Actions">
                    <span class="flexicon flexicon-ellipsis"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right">
                    <li> <a href="">Thing One</a> </li>
                    <li> <a href="">Thing Two</a> </li>
                    <li> <a href="">Thing Three</a> </li>
                  </ul>
                </div>
              </td>
            </tr>

            <tr>
              <th scope="row">3</th>
              <td>Edward</td>
              <td>Reinhold</td>
              <td>@judgereinhold</td>
              <td>Red</td>
              <td>Palm</td>
              <td class="c-card-table-fixed-col">
                <div class="dropdown">
                  <button class="btn btn-icon--sm" type="button" data-toggle="dropdown" aria-label="Actions">
                    <span class="flexicon flexicon-ellipsis"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right">
                    <li> <a href="">Thing One</a> </li>
                    <li> <a href="">Thing Two</a> </li>
                    <li> <a href="">Thing Three</a> </li>
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>

        </table>
      </div>
    </div>
  </div>


</div>
Condensed Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
Standard Table without Header/Footer
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<table class="table">
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
Responsive Table

The Responsive Table should only be used at the direction of Design (Travis, Paul).

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell 

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>
Implementation Notes
  • To create a responsive table, wrap a regular table in a <div> element that has a .table-responsive class.
Responsive Table
Compact Tabular Input
Table heading Table heading Table heading Table heading Table heading 

<div class="c-container--canvas">
  <div class="table-responsive">
    <table class="table c-card-table--compact">
      <thead>
        <tr>
          <th></th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th></th>
        </tr>
      </thead>
      <tbody class="c-sortable-list">
        <tr>
          <th><a href="#" class="flexicon flexicon-bars handle"></a></th>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><textarea class="form-control"></textarea></td>
          <th><a href="#" class="flexicon flexicon-trash"></a></th>
        </tr>
        <tr>
          <th><a href="#" class="flexicon flexicon-bars handle"></a></th>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><textarea class="form-control"></textarea></td>
          <th><a href="#" class="flexicon flexicon-trash"></a></th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
$(function () {
  $('.c-sortable-list').sortable({
    handle: '.handle'
  })
});
</script>