Skip to content

Tables

The following table has a default style. But in future, there will be several patterns and styles to choose from.

You may consider using table-layout: fixed;. You can use the modifier class in doing so: .dnb-table--fixed

Working Demo

Check out a working example on CodeSandbox, using react-table.

Classes

NB: Tables get their default table style by only having correct markup and the .dnb-table class assigned.

To enhance or manipulate the the table style, you can make use of a couple helper classes:

  • .dnb-table--fixed Table Layout
  • .dnb-table__th Table Header
  • .dnb-table__td Table Data
  • .dnb-table__tr Table Row
  • .dnb-table__tr--even Use this on a tr - if manual definition is needed
  • .dnb-table__tr--odd Use this on a tr - if manual definition is needed
  • .dnb-table--no-wrap Use this on a th
  • .dnb-table--sortable Use this on a th - sortable column
  • .dnb-table--active Use this on a th - current column is sorted
  • .dnb-table--reversed Use this on a th - defines the order
  • .dnb-table--right Use this on a th, td or tr - align the content to the right (or use align="right")
  • .dnb-table--center Use this on a th, td or tr - align the content to the left (or use align="center")
.dnb-table__th
.dnb-table__tr--even > .dnb-table__td
.dnb-table__tr--odd > .dnb-table__td

Example usage of class helpers

Default Table style

A Table Caption
Header

Column 1 width p

Column 2 with codeColumn 3 with spanColumn 4
Column which spans over two columnsColumn 3Column 4
Column 1Column 2Column 3Column 4

Table with sticky header

NB: Keep in mind, you have to avoid using overflow: hidden; on any child elements to get position: sticky; to work. This is a know issue happening on every modern browser. There are various tricks, including this deallocation / sync solution.

A Table Caption
Header
FooterSum

Column 1 width p

Column 2 with codeColumn 3 with spanColumn 4
Column which spans over two columnsColumn 3Column 4
Column 1Column 2Column 3Column 4

Table with long header text (wrapping)

Also, the table header is set to small font-size.

A Table Caption
Static long header senectus ornare convallis ut at erat imperdiet commodo

col span of 4