Tables

Easily create nice looking table, which come in different styles.

Colors No
Sizes No
Variables Yes

You simply need to attach a single .table CSS class on a <table> with the following structure:

  • table the main container
    • thead the optional top part of the table
    • tfoot the optional bottom part of the table
    • tbody the main content of the table
      • tr each table row
        • th a table cell heading
        • td a table cell

You can set a table row as selected by appending the is-selected modifier on a <tr>

Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data 
<table class="table is-fullwidth is-hoverable">
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th>Table Heading</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="is-selected">
      <td>Table Footer</td>
      <td>Table Footer</td>
      <td>Table Footer</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
    <tr>
      <td>Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
    </tr>
  </tbody>
</table>

Modifiers #

Add borders to all the cells.

table is-bordered
One Two
Three Four

Add stripes to the table.

table is-striped
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

Make the cells narrower.

table is-narrow
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

You can add a hover effect on each row

table is-hoverable
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

You can have a fullwidth table.

table is-fullwidth
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

You can combine all five modifiers.

table is-bordered is-striped is-narrow is-hoverable is-fullwidth
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Elenore. Learn how.

Name Default value
Name Default value
$table-color $grey-darker
$table-background-color $white
$table-cell-border 1px solid $grey-lighter
$table-cell-border-width 0 0 1px
$table-cell-padding 0.5em 0.75em
$table-cell-heading-color $text-strong
$table-head-cell-border-width 0 0 2px
$table-head-cell-color $text-strong
$table-foot-cell-border-width 2px 0 0
$table-foot-cell-color $text-strong
$table-row-hover-background-color $white-bis
$table-row-active-background-color $primary
$table-row-active-color $primary-invert
$table-striped-row-even-background-color $white-bis
$table-striped-row-even-hover-background-color $white-ter

This page is open source. View on GitHub