Table basics

The default table style can be accessed by adding the ink-table class to the <table> element. This will enable you to use the default style. You can then add other classes to get any of the variations.

Default style

<table class="ink-table">
ID Product name Product price
This is a table footer
24 Twin color basketball shoe €26,00
13 Cast iron waffle maker €158,00
55 Sports duffle bag €15,00
23 Some stuff €489,00

Alternating colored rows

To better distinguish between consecutive rows, combine the ink-table class with the ink-zebra class to get an alternating background color effect.

<table class="ink-table ink-zebra">
ID Product name Product price
This is a table footer
24 Twin color basketball shoe €26,00
13 Cast iron waffle maker €158,00
55 Sports duffle bag €15,00
23 Some stuff €489,00

Highlight rows on hover

To highligh rows on mouse hover, add the ink-hover class.

<table class="ink-table ink-hover">
ID Product name Product price
This is a table footer
24 Twin color basketball shoe €26,00
13 Cast iron waffle maker €158,00
55 Sports duffle bag €15,00
23 Some stuff €489,00

Full borders

To get a more classic table with borders all around, use ink-bordered.

<table class="ink-table ink-bordered">
ID Product name Product price
24 Twin color basketball shoe €26,00
24 Twin color basketball shoe €26,00
13 Cast iron waffle maker €158,00
55 Sports duffle bag €15,00
23 Some stuff €489,00

Combining several styles

For great flexibility you can combine all of the above styles in the same table, obtaining a fully bordered table with alternating colored rows that light up on hover.

<table class="ink-table ink-bordered ink-zebra ink-hover">
ID Product name Product price
24 Twin color basketball shoe €26,00
24 Twin color basketball shoe €26,00
13 Cast iron waffle maker €158,00
55 Sports duffle bag €15,00
23 Some stuff €489,00

Special colored rows

You can use the Ink utility classes to style rows that need special attention. Use ink-info, ink-warning, ink-caution or ink-success on any <tr> to paint the row in the corresponding background color.

ID Product name Product price
24 Twin color basketball shoe €26,00
24 Twin color basketball shoe €26,00
13 Cast iron waffle maker €158,00
55 Sports duffle bag €15,00
23 Some stuff €489,00