SUI Tables

SUI tables, like most of SUI components are build on top of their Bootstrap conterparts.

For leagcy table design add bc-table-legacy — see the legacy tables page.

  <table>
          ...
        </table>
      
        <table class="bc-table-brand">
          ...
        </table>
      
        <table class="bc-table-legacy">
          ...
        </table>
      

Accessible markup

  <table>
          <caption class="sr-only">Feature availability by course type</caption>
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">Live learning</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Onboarding service</th>
              <td>
                <svg class="bc-svg bc-svg-status bc-svg-status-yes" aria-hidden="true"><use xlink:href="#icon-check-circle"></use></svg>
                <span class="sr-only">Yes</span>
              </td>
            </tr>
          </tbody>
        </table>
      

• caption names the table; sr-only keeps it off screen.
• scope="col" on header cells, scope="row" on row headers.
• Status icons carry aria-hidden="true"; the label is a sibling span.sr-only. Do not use aria-label on the svg — a text node is translated with the page, is picked up by text extraction, is copied with the table, and still reads if the sprite has not loaded.
• sr-only clips rather than using display: none, so the text stays in the DOM and the accessibility tree.
• Purely decorative icons take aria-hidden="true" with no label at all, as in cell-has-icon below.

Comparison matrix — bc-table-brand

Status icons

The three icons live in the SUI sprite, so anything loading SUI's JavaScript can reference them — there is no need for a second copy in Drupal. Colour comes from the class, not the SVG, because the sprite build strips fill and the icons paint with currentColor. Each icon is paired with a span.sr-only carrying its label.

  <svg class="bc-svg bc-svg-status bc-svg-status-yes" aria-hidden="true"><use xlink:href="#icon-check-circle"></use></svg>
        <span class="sr-only">Yes</span>
        <svg class="bc-svg bc-svg-status bc-svg-status-no" aria-hidden="true"><use xlink:href="#icon-cross-circle"></use></svg>
        <span class="sr-only">No</span>
        <svg class="bc-svg bc-svg-status bc-svg-status-na" aria-hidden="true"><use xlink:href="#icon-dash"></use></svg>
        <span class="sr-only">Not applicable</span>
      

Brand 2025 table on mobile

Wrapping the table in bc-mobile-tables reuses the existing responsive mechanism — no new mobile behaviour was added. Narrow the window below the small breakpoint to see each row stack. The row header becomes a full width indigo band with no rule beside it, and the label and value split the row evenly, with the value centred in its half.

Brand 2025 table with no header row

What an editor gets if they forget the thead and add no icons. There is no indigo band, so every row is a plain body row: first cell left aligned and semibold, the rest centred. The rules, colours and padding are unchanged, so it still reads as the same table.

Default table

To use a default table either use a class of table, as they are in Bootstrap or with no classes at all. This is so we don't have to add any classes when we use this component in a WYSIWYG editor.

This example uses the Bootstrap solution to responsive tables, which is to wrap the table in a scrolling container via a class of table-responsive. This is the very least we want to to when it comes to tables on mobile. This isn't a great solution as it often isn't obvious to a user than they can interact with the table and they might not interpret it correctly seeing only if they can only see the first two columns, unaware there are more columns hidden off screen.

If you have a well formed table with a row of table headers and data cells with no colspan or rowspan then please take a look at the SUI responsive tables as they work loads better on mobile!

      <div class="table-responsive">
              <table>
                <thead>
                  <tr>
                    <th scope="col">Row 1, Col 1</th>
                    <th scope="col">Row 1, Col 2</th>
                    <th scope="col">Row 1, Col 3</th>
                    <th scope="col">Row 1, Col 4</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Row 2, Col 1</td>
                    <td>Row 2, Col 2</td>
                    <td>Row 2, Col 3</td>
                    <td>Row 2, Col 4</td>
                  </tr>
                  <tr>
                    <td>Row 3, Col 1</td>
                    <td>Row 3, Col 2</td>
                    <td>Row 3, Col 3</td>
                    <td>Row 4, Col 4</td>
                  </tr>
                </tbody>
              </table>
            </div>
      

SUI Responsive tables

The Bootstrap solution to responsive tables is to wrap the table in a scrolling container. This is the least we want to to when it comes to tables on mobile, hence why we demonstrated it on the example above.

If you have a well formed table with a row of table headers and data cells with no colspan's then please take a look at the next example which is the same as the above example but check it again on mobile to see the difference. Not in this case yo do not need to use the table-responsive container as these types of table should not need them.

All you need to do to implement this type of 'mobile aware' table is wrap the table or group of tables in a wrapper with a class of bc-mobile-tables.
Like so:

      <div class="bc-mobile-tables">
              <table>
                ...
              </table>
              <table>
                ...
              </table>
            </div>
      

SUI Responsive tables with CTA

The folowing example shows some type product finder data including a call to action in the last cell of each row. This is achieved via a class of bc-cell-has-cta on the last cell and an icon link bc-icon-link-block-** inside that cell.

SUI Plain table

The following example shows a plain table, .bc-table-plain, it has all the same vertical paddings as a regular table except all colours are transparent.

SUI table with icons and cell overrides

Bootstrap Tables

All of the following examples are the default table options that come with Bootstrap

Basic example

Table with class="table"

Striped rows

Table with class="table table-striped"

Bordered table

Table with class="table table-bordered"

Hover rows

Table with class="table table-hover"

Condensed table

Table with class="table table-condensed"

Table with contextual classes

Standard table with context classes on the <tr>, possible values:

• <tr class="active">
• <tr class="success">
• <tr class="info">
• <tr class="warning">
• <tr class="danger">