Cross Table
Two-way data table used to display correlation between row and column variables.
Projects /
Projects /
Two-way data table used to display correlation between row and column variables.
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').
On bigger screens, the column width is determined by the width value applied to the .cross-table__cell element (25% in our demo).
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.
