ITL utility_classes

ITL utility_classes

Source: _tables.scss, line 1

8 Table

@mixin table @mixin tableStyle([striped, bordered]) Some simple table styles

  • .table: simple table styling
  • .table--bordered: adds a border to the table
  • .bordered--vertical: removes horizontal borders
  • .bordered--<color>: changes the border-color
  • .table--striped: gives the even and odd rows a different background
  • .striped__odd--<color>: changes the bg-color of the odd rows
  • .striped__even--<color>: changes the bg-color of the even rows
  • .table

Example

Header1Header2
numerosample
extrarandom
Header1Header2
numerosample
extrarandom
Header1Header2
numerosample
extrarandom
Header1Header2
numerosample
extrarandom
<table class="table table--bordered bordered--blue inline-block ">
 <tr><th>Header1</th><th>Header2</th></tr>
 <tr><td>numero</td><td>sample</td></tr>
 <tr><td>extra</td><td>random</td></tr>
</table>
<table class="table table--striped inline-block">
 <tr><th>Header1</th><th>Header2</th></tr>
 <tr><td>numero</td><td>sample</td></tr>
 <tr><td>extra</td><td>random</td></tr>
</table>
<table class="table table--bordered bordered--vertical bordered--red inline-block">
 <tr><th>Header1</th><th>Header2</th></tr>
 <tr><td>numero</td><td>sample</td></tr>
 <tr><td>extra</td><td>random</td></tr>
</table>
<table class="inline-block table table--striped striped__odd--black striped__even--blue">
 <tr><th>Header1</th><th>Header2</th></tr>
 <tr><td>numero</td><td>sample</td></tr>
 <tr><td>extra</td><td>random</td></tr>
</table>