#Tables

The usual HTML table, but more stylized

Basic table

<table class="be-table">
  <tr>
    <th>Name</th>
    <th>Character</th>
    <th>Movie</th>
  </tr>
  
  <tr>
    <td>Robert Downey Jr.</td>
    <td>Iron Man</td>
    <td>The Avengers</td>
  </tr>
  ...
  <tr>
    <td>Patrick Swayze</td>
    <td>Johnny Castle</td>
    <td>Dirty Dancing</td>
  </tr>
</table>

Differentiate row

You can interpolate a color between the rows to make it easier to visualize. Just use the be-table-even class.

<table class="be-table be-table-even">
...
</table>

Remove borders

You can remove the borders to the table using the be-bdr-none class. Or you can add a color to the header.

<table class="be-table be-bdr-none">
  <tr class="be-bg-clouds">
    <th>Name</th>
    <th>Character</th>
    <th>Movie</th>
  </tr>
...
</table>

Table Responsive

Sometimes you may need a very wide table so it would need to fit properly into small screen formats.

In these cases it will be enough to nest the entire table in a div with the be-table-responsive class. Please note that table will display a horizontal scroll bar when the screen is too small to show the full content.

Please resize the browser to see how the table fits.