How to

By default, each row is displayed as a separate block (layout optimized for smaller screens). To edit this behavior, you can apply the .table--expanded class to the .table element. The .table--expanded modifier is used to display the standard table layout (rows + columns).

Optionally, you can use one of the [email protected]{breakpoint} classes to edit the layout at a specific breakpoint (example):

To set a fixed width for a column, apply one of the width utility classes to the .table__cell element. Because of the implicit size correlation among cells belonging to the same column (they share the same size), you can apply the width class only to one .table__cell element. All the other cells in the same column will adapt accordingly.

Please be aware the width utility classes have effect only when the .table--expanded modifier is applied to the .table element.