Pattern Library (ver. 1.9)

Responsive tables

There are two types of responsive views available:

View Responsive behaviour Appropriate for Breakpoint Requires JavaScript?
Normal view

The table visual formatting and layout is preserved. The table may be scrolled horizontally in order to see all column data.

The normal view uses the same HTML structure and CSS classes as Bootstrap responsive tables.

When there are many rows and columns and the user has to compare data across multiple columns.

Can occur anytime the table is too large for the screen, using .table-responsive.

Or, can be breakpoint-specific by using .table-responsive{-sm|-md|-lg|-xl} to make the table responsive up to the particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Each breakpoint-specific table has a min-width equal to the breakpoint.

Yes
Stacked view The rows are collapsed and styled as self-contained units. Inside each row, the column data is stacked. When each table row could be viewed as a self-contained unit and the user does not need to compare data across multiple columns. Screen sizes less than 768px. Yes

Demo

Table styles
Table heading style

Resize your browser window to see the responsive styles.

 Scroll sideways to see the full table.
Example table caption
Full Name Title Email Phone Start Date
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005

Mitigating line wrapping

At smaller screen sizes, some columns may become horizontally squished forcing the text to wrap onto multiple lines. In the example table above, see the Phone and Start Date columns. Below are a few ways to mitigate the line wrapping. Mix and match the options to suit your specific scenario.

  • Use the breakpoint-specific normal view. In addition to making the table responsive up to the specified breakpoint, the <table> will automatically be given a min-width equal to the breakpoint. For example, when using, the .table-responsive-lg, the min-width on the table will be 991px. The column cells have more room to grow to the width of the table and should appear less squished.
  • Add the utility class text-nowrap onto each table cell where the text should not wrap onto a new line. Note that this method would result in other columns becoming thinner.
  • Apply table-layout: fixed; to the <table> and manually set the widths for each column by applying a width to each <th> in the <thead>. A percentage width is recommended.

Code

Normal view

Code


<!-- The JavaScript will handle showing and hiding the left and right
overlays and the text message to indicate to the user that the table is
scrollable.
-->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc.tables.js"></script>

<!-- The `table-responsive-msg` element provides information to the user
that the table is scrollable. JavaScript will automatically detect when to
show and hide the message.
-->
<div class="table-responsive-msg">
    <span class="cicon-info-circle"></span>&nbsp;Scroll sideways to see the full table.
</div>

<!--
`table-responsive` applies the responsive behaviour for all screen sizes.
The specific breakpoint the behaviour kicks in will depend on the table content.

`table-responsive` may be replaced with:
`table-responsive-sm` to apply the responsive behaviour for screens smaller than 576px; or
`table-responsive-md` to apply the responsive behaviour for screens smaller than 678px; or
`table-responsive-lg` to apply the responsive behaviour for screens smaller than 992px; or
`table-responsive-xl` to apply the responsive behaviour for screens smaller than 1200px

The class MUST be applied to a <div> wrapper surrounding the <table>.
-->
<div class="{{ table-responsive | table-responsive-sm | table-responsive-md | table-responsive-lg | table-responsive-xl }}">
    <table class="cui normal-view {{ bordered / striped / dark-header }}">
        <caption>{{ Table caption }}</caption>
        <thead>
            <tr>
                <th>{{ Heading }}</th>
                <th>{{ Heading }}</th>
                <th>{{ Heading }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- If the first column will act as a row heading,
                a <th> may be used instead of <td>. -->
                <td>{{ Content }}</td>
                <td>{{ Content }}</td>
                <td>{{ Content }}</td>
            </tr>
        </tbody>
    </table>
</div>

Stacked view

Code


<!-- The JavaScript adds a label to each column, corresponding to the
column's heading. This gives context to the column data when viewing the
table on smaller screens.
-->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc.tables.js"></script>

<!-- By default, the stacked effect will take place for screens up to 768px wide.
To apply the stacked effect for all screen sizes, add the class `table-mobile-version`.
-->
<table class="cui {{ bordered / striped / dark-header }}">
    <caption>{{ Table caption }}</caption>
    <thead>
        <tr>
            <th>{{ Heading }}</th>
            <th>{{ Heading }}</th>
            <th>{{ Heading }}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- If the first column will act as a row heading,
            a <th> may be used instead of <td>. -->
            <td>{{ Content }}</td>
            <td>{{ Content }}</td>
            <td>{{ Content }}</td>
        </tr>
    </tbody>
</table>