CSS reference - Bifrost

Table

Basic styling

Use the .bf-table and .bfc-base-3-bg classes on a <table> to apply the bifrost default table styling

HTML

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
    <tr>
      <td>Shane Hollander</td>
      <td>Montreal Voyageurs</td>
      <td>Centre</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Scott Hunter</td>
      <td>New York Admirals</td>
      <td>Centre</td>
      <td>USA</td>
    </tr>
  </tbody>
</table>

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada
Scott Hunter	New York Admirals	Centre	USA

Clickable row

Style a <tr> as clickable with .bf-table-row-clickable, which applies a different background changes on hover, and an outline on keyboard focus.

Use tabindex="0" to make it focusable for keyboard users, and role="button" to make screen readers understand it's supposed to behave as a button.

The inline onclick is for demo purposes, preferably use an addEventListener in JS instead (or whatever convention your framework uses).

HTML

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr
      role="button"
      tabindex="0"
      class="bf-table-row-clickable"
      onclick="alert('Clicked row 1')"
    >
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
  </tbody>
</table>

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia

Borderless

Use .bf-table-noborder to remove the default left-hand border

HTML

<table class="bf-table bfc-base-3-bg bf-table-noborder">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
    <tr>
      <td>Shane Hollander</td>
      <td>Montreal Voyageurs</td>
      <td>Centre</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada

Sort order icon

You can indicate that the table can be sorted by a column with an appropriate icon, and style it with the .bf-table-header-cell-sort class.

See notes about accessibility in "Clickable row" section above.

HTML

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th class="bf-table-cell-clickable">
        Sorted ascending
        <i class="fa-solid fa-sort-up bf-table-header-cell-sort"></i>
      </th>
      <th class="bf-table-cell-clickable">
        Sorted descending
        <i class="fa-solid fa-sort-down bf-table-header-cell-sort"></i>
      </th>
      <th class="bf-table-cell-clickable">
        Inactive sort
        <i
          class="fa-solid fa-sort bf-table-header-cell-sort bf-table-header-cell-sort-none"
        ></i>
      </th>
    </tr>
  </thead>
</table>

Sorted ascending	Sorted descending	Inactive sort

Expandable row

Make space for the angle column with an empty header cell <th></th>
If the entire row should be clickable, use .bf-table-row-clickable bf-table-expand-nolimit on the <tr>
Use .bf-table-expand-icon-cell class on the first cell on each row

HTML

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bf-table-row-clickable bf-table-expand-nolimit">
      <td class="bf-table-expand-icon-cell">
        <div class="bf-table-expand-icon-wrapper">
          <i
            class="fa-solid fa-angle-right bf-table-expand-icon bf-table-expand-icon-open"
          ></i>
        </div>
      </td>
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
    <tr>
      <td class="bf-table-expandable-cell" colspan="5">
        <div class="bf-expand bf-expand-expanded">
          <div>
            <div class="bf-table-expanded-content bfc-base-2-bg bf-padding">
              Expanded content
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr
      class="bf-table-row-clickable bf-table-expand-nolimit bf-table-expand-closed"
    >
      <td class="bf-table-expand-icon-cell">
        <div class="bf-table-expand-icon-wrapper">
          <i class="fa-solid fa-angle-right bf-table-expand-icon"></i>
        </div>
      </td>
      <td>Shane Hollander</td>
      <td>Montreal Voyageurs</td>
      <td>Centre</td>
      <td>Canada</td>
    </tr>
    <!-- for collapsed content, remove bf-expand-expanded and add bf-expand-closed -->
    <tr>
      <td class="bf-table-expandable-cell" colspan="4">
        <div class="bf-expand bf-expand-closed">
          <div>
            <div class="bf-table-expanded-content bfc-base-2-bg bf-padding">
              Expanded content
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

	Name	Team	Position	Country
	Ilya Rozanov	Boston Bears	Centre	Russia
Expanded content
	Shane Hollander	Montreal Voyageurs	Centre	Canada
Expanded content

Vertical headers

The .bf-table-vertical-header class applies a colored left border.

Then, use <th> (table header cell) inside <tbody>.

By default, .bf-table applies width: 100%, if you don't want that you can override it with width: auto.

HTML

<table
  class="bf-table bfc-base-3-bg bf-table-vertical-header"
  style="width: auto"
>
  <tbody>
    <tr>
      <th>Name</th>
      <td>Ilya Rozanov</td>
      <td>Shane Hollander</td>
    </tr>
    <tr>
      <th>Team</th>
      <td>Boston Bears</td>
      <td>Montreal Voyageurs</td>
    </tr>
    <tr>
      <th>Position</th>
      <td>Centre</td>
      <td>Centre</td>
    </tr>
    <tr>
      <th>Country</th>
      <td>Russia</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

Name	Ilya Rozanov	Shane Hollander
Team	Boston Bears	Montreal Voyageurs
Position	Centre	Centre
Country	Russia	Canada

Two-dimensional

You can have both a <thead> and use <th> inside <thead> in the same table:

HTML

<table class="bf-table bfc-base-3-bg bf-table-vertical-header two-demo">
  <thead>
    <tr>
      <th></th>
      <th>Free</th>
      <th>Professional</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Open documents</th>
      <td><i class="fa-solid fa-check"></i></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
    <tr>
      <th>Edit documents</th>
      <td></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
  </tbody>
</table>
<style>
  .two-demo {
    width: auto;
    text-align: center;
  }
</style>

	Free	Professional
Open documents
Edit documents

Sandbox

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding">
  <table class="bf-table bfc-base-3-bg">
    <thead>
      <tr>
        <th>Name</th>
        <th>Team</th>
        <th>Position</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bf-table-row-clickable" tabindex="0" role="button">
        <td>Ilya Rozanov</td>
        <td>Boston Bears</td>
        <td>Centre</td>
        <td>Russia</td>
      </tr>
      <tr class="bf-table-row-clickable" tabindex="0" role="button">
        <td>Shane Hollander</td>
        <td>Montreal Voyageurs</td>
        <td>Centre</td>
        <td>Canada</td>
      </tr>
      <tr class="bf-table-row-clickable" tabindex="0" role="button">
        <td>Scott Hunter</td>
        <td>New York Admirals</td>
        <td>Centre</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
</div>