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.
<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 |
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 |
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 |
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 |
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 |
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 |