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

Working Demo

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

Styled Demo

A Table Caption
Header

Column 1 width p

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

Classes

There are a couple helper classes to style tables:

  • .dnb-table__th Table Header
  • .dnb-table__td Table Data
  • .dnb-table__tr Table Row
  • .dnb-table__tr--even Use this on a tr
  • .dnb-table__tr--odd Use this on a tr
  • .dnb-table--no-wrap Use this on a th
  • .dnb-table--active Use this on a th
  • .dnb-table--sortable Use this on a th
  • .dnb-table--reversed Use this on a th
  • .dnb-table--tabular Use this on the table root
.dnb-table__th
.dnb-table__tr--even > .dnb-table__td
.dnb-table__tr--odd > .dnb-table__td

Example usage of class helpers

Tabular Numbers

Set Tabular Lining on tables by using this CSS class: .dnb-table--tabular

Tabular Lining
0123456789