Table

The following shows how tables are styled. Basically it needs the following classes:

• .table
  • .table__caption
  • colgroup have no specific class
    • col have no specific class
  • .table__thead
    • .table__tr
      • .table__th
  • .table__tbody
    • .table__tr
      • .table__td
  • .table__tfoot
    • .table__tr
      • .table__td

A table does not have to be created with the table tag. You can also build them with, for example, div elements. The advantage of the table tag is the use of the colgroup.

Variants

The following examples show variants of a table.

Content Right

With the class .table--content-right the first column is aligned left, all remaining columns are aligned right. The last column is omitting the default padding right.

Additional modifier for the table and it’s columns can still be set.

Content Center

With the class .table--content-center the first column is aligned left, all remaining columns are aligned center.

Additional modifier for the table and it’s columns can still be set.

First column headline

With the class .table--headline-first-col the first column is displayed similar to the table head in a different color and bold

Additional modifier for the table and it’s columns can still be set.

Table Modifiers

Great Modifiers are available to modify your table.

Fixed Table Modifier

The fixed table has a fixed height of 25rem. If there are a lot of Table Rows, the Content becomes vertically scrollable while the Table Head remains sticky on top. The modifier is added to the table tag and is called .table--fixed.

Alternate Row Colors

With the modifer .table--alternate every second row has a different color.

Hoverable Rows

With the modifier .table--hover every row will be visually highlighted by hovering the row.

Hovering is also possible, if the table has already alternated Colored Rows via .table--alternate.table--hover.

Column Width Modifier

Define the Column Width by using Global Size Modifiers

Column Specific Modifier

Use Column-specific Modifier for a specific Column

• .table--col-{NUMBER}-suppress-line-breaks
• .table--col-{NUMBER}-allow-line-breaks
• .table--col-{NUMBER}-font-weight-bold
• .table--col-{NUMBER}-font-weight-thin
• .table--col-{NUMBER}-background-color-{colorname}
• .table--col-{NUMBER}-font-color-{colorname}
• .table--col-{NUMBER}-text-align-center
• .table--col-{NUMBER}-text-align-left
• .table--col-{NUMBER}-text-align-right

Possible Values for NUMBER are 1-10.

Additionally you can reset the first columns bold text by using

• .table--col-1-font-weight-normal

• .table--col-1-font-weight-normal - Reset the default, that first cols text is bold.

• .table--col-2-suppress-line-breaks.table--col-3-allow-line-breaks - Add custom white-space behavior for second and third Columns.

• .table--col-2-font-weight-bold.table--col-3-font-weight-bold - Add bold Font to all second and third Columns.

• .table--col-2-text-align-center.table--col-3-text-align-right - Add custom text alignments to second and third Columns.

Suppresses Line Breaks

Text in Table-Heads will never break lines, so they are always without line-breaks.

Next to that you can add .table--suppress-line-breaks to the table-Element to avoid line breaks for all texts.

It’s also possible to define a specific Column with suppress-line-breaks by using .table--col-{NUMBER}-suppress-line-breaks

Finally you can also use .table__td--suppress-line-breaks to add avoid breaking lines for only a specific td.

Small Table

A Table with smaller sized Fonts.

Table Colors

Use the regular Global Color Modifiers to set .background-color-{COLORNAME} or .font-color-{COLORNAME}

Table with Links

The following Example shows a Table just with Links.

Full Example

The following Example shows how to combine all Modifer and represents a full featured Table.

This Table is also combined with an surrounding .horizontal-scrolling Modifier