Go to homepage

Projects /

Cross Table

Two-way data table used to display correlation between row and column variables.

View Demo

How to

The Cross Table component is used to organize data in a two-dimensional grid and show the correlation between row and column values.


On smaller screens, the layout is populated by 'card' components, each one representing a single table row.

The elements with the .js-cross-table__label class, inside the .cross-table__header, are used as inline lables for the cards layout (in the demo, the labels are 'Basic', 'Pro' and 'Enterprise').

Column width

On bigger screens, the column width is determined by the width value applied to the .cross-table__cell element (25% in our demo).

Full-width rows

The .cross-table__row--w-full elements are used to create full-width rows to divide the table into different row sections.

The full width is set using the colspan attribute equal to the total number of table columns (4 in the demo). If you change the number of columns of your table, make sure to update the value of the colspan attribute as well.


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.