CSS reference - Bifrost

Bifrost table

Basic styling

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

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Eric Morton</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
    <tr>
      <td>Linda Tran</td>
      <td>Datteren til oppfinneren av Tran</td>
      <td>Developer Services</td>
    </tr>
    <tr>
      <td>Herman Jensen</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
  </tbody>
</table>
<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Eric Morton</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
    <tr>
      <td>Linda Tran</td>
      <td>Datteren til oppfinneren av Tran</td>
      <td>Developer Services</td>
    </tr>
    <tr>
      <td>Herman Jensen</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
  </tbody>
</table>

Name	Title	Department
Eric Morton	Developer	Developer Services
Linda Tran	Datteren til oppfinneren av Tran	Developer Services
Herman Jensen	Developer	Developer Services

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).

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr
      role="button"
      tabindex="0"
      class="bf-table-row-clickable"
      onclick="alert('Clicked row 1')"
    >
      <td>Eric Morton</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
  </tbody>
</table>
<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr
      role="button"
      tabindex="0"
      class="bf-table-row-clickable"
      onclick="alert('Clicked row 1')"
    >
      <td>Eric Morton</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
  </tbody>
</table>

Name	Title	Department
Eric Morton	Developer	Developer Services

Borderless

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

<table class="bf-table bfc-base-3-bg bf-table-noborder">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Eric Morton</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
  </tbody>
</table>
<table class="bf-table bfc-base-3-bg bf-table-noborder">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Eric Morton</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
  </tbody>
</table>

Name	Title	Department
Eric Morton	Developer	Developer Services

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.

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

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Title</th>
      <th>Department</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>Expanded row</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
    <tr>
      <td class="bf-table-expandable-cell" colspan="4">
        <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>Collapsed row</td>
      <td>Developer</td>
      <td>Developer Services</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>
<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Title</th>
      <th>Department</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>Expanded row</td>
      <td>Developer</td>
      <td>Developer Services</td>
    </tr>
    <tr>
      <td class="bf-table-expandable-cell" colspan="4">
        <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>Collapsed row</td>
      <td>Developer</td>
      <td>Developer Services</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	Title	Department
	Expanded row	Developer	Developer Services
Expanded content
	Collapsed row	Developer	Developer Services
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.

<table
  class="bf-table bfc-base-3-bg bf-table-vertical-header"
  style="width: auto"
>
  <tbody>
    <tr>
      <th>Navn</th>
      <td>Cecilie Tornaas Turgut</td>
    </tr>
    <tr>
      <th>Avdeling</th>
      <td>Developer Services</td>
    </tr>
    <tr>
      <th>Interesser</th>
      <td>Tukle med tabeller</td>
    </tr>
  </tbody>
</table>
<table
  class="bf-table bfc-base-3-bg bf-table-vertical-header"
  style="width: auto"
>
  <tbody>
    <tr>
      <th>Navn</th>
      <td>Cecilie Tornaas Turgut</td>
    </tr>
    <tr>
      <th>Avdeling</th>
      <td>Developer Services</td>
    </tr>
    <tr>
      <th>Interesser</th>
      <td>Tukle med tabeller</td>
    </tr>
  </tbody>
</table>

Navn	Cecilie Tornaas Turgut
Avdeling	Developer Services
Interesser	Tukle med tabeller

Two-dimensional

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

<table class="bf-table bfc-base-3-bg bf-table-vertical-header two-demo">
  <thead>
    <tr>
      <th></th>
      <th>Gratis</th>
      <th>Profesjonell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Åpne dokumenter</th>
      <td><i class="fa-solid fa-check"></i></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
    <tr>
      <th>Endre dokumenter</th>
      <td></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
  </tbody>
</table>
<style>
  .two-demo {
    width: auto;
    text-align: center;
  }
</style>
<table class="bf-table bfc-base-3-bg bf-table-vertical-header two-demo">
  <thead>
    <tr>
      <th></th>
      <th>Gratis</th>
      <th>Profesjonell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Åpne dokumenter</th>
      <td><i class="fa-solid fa-check"></i></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
    <tr>
      <th>Endre dokumenter</th>
      <td></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
  </tbody>
</table>
<style>
  .two-demo {
    width: auto;
    text-align: center;
  }
</style>

	Gratis	Profesjonell
Åpne dokumenter
Endre dokumenter