Tables

Documentation and examples for opt-in styling of tables with Inkline.

Basic Table

Using the most basic table markup, here’s how tables look in Inkline. All table styles are inherited in Inkline, meaning any nested tables will be styled in the same manner as the parent.

Basic Table
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper

Bordered Table

Add the bordered property for borders on all sides of the table and table cells.

Bordered Table
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper

Striped Table

Add the striped property to add zebra-striping to any table row within the table body.

Striped Table
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper

Hoverable Table

Add the hover property to enable a hover state on table rows within a <tbody>.

Hoverable Table
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper

Responsive Table

Enable responsiveness by adding the responsive property. Responsive tables scroll horizontally on small devices. When viewing on anything larger, you will not see any difference in these tables.

You can target specific responsive breakpoints by setting a value to the responsive property: responsive="<breakpoint>", where breakpoint is one of xs, sm, md, lg or xl.

Responsive Table
# Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
1 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
2 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
3 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell

Variants

Tables can be themed using the variant property. You can use colors such as light, dark, primary, secondary, info, success, warning, and danger. You can set a variant for the table as a whole or individual table elements. By default, tables have the light variant. You can use a variation of any of the above classes to create the table design you need.

Table Variants
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper
# First Name Last Name Username
1 Alex Grozav @alexgrozav
2 John Doe @johndoe
3 Alice Cooper @alicecooper