Responsive tables

There are two types of responsive views available:

View Responsive behaviour Appropriate for Breakpoint Requires JavaScript?

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

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

Bordered

Striped

Table heading style

Normal

Dark

Responsive view

Resize your browser window to see the responsive styles.

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

<!-- 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

<!-- 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>