Table

The table layout consists out of a header and a body. The header can be optional. The header only consists out of one table row, while the body can consist out of multiple rows, split up into different columns of variable widths.

The widths of the columns can be defined by applying a modifier. Each column can be split up into a width divided by 12 parts. The with is defined by indicating how much of those 12 parts the column spans. This can be 1-12, 3-12, 6-12, ... . For example 6-12 means that one column takes up half of the entire container width. 4-12 means just a quarter and so on.

This layout only takes care of the seperation of the columns and the general layout. Other component classes should influence this layout and seperate the content in each column.

Default

These tables consist out of a header and a body. Both are separated into rows, which in their turn are separated into columns.

l-table
l-table__header
l-table__col
l-table__col
l-table__col
l-table__body
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table
l-table__header
l-table__col
l-table__col
l-table__col
l-table__body
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col
l-table__col