Table

Add some different design to our table element by adding some modifier class such as .table-border or to a cell with a modifier class such as .table-cell-price (it align the text to the right of the cell). Note that you can also use the modifier .table-rowspan to have a lighter border between two rows.

Warning: when using a table component, it is mostly necessary to use a different dom element for mobile screens.You can try to avoid this in hiding some table lines or group cells with .show-xs/.hidden-xs responsive helper classes.

Basic table

 <table>
  <tr>
    <th>Lorem</th>
    <th>Ipsum</th>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
</table>
                    

Bordered table

<table class="table-border">
  <tr><th>Lorem</th><th>Ipsum</th></tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
</table>
                    

Bordered lines table

  <table class="table-border">
    <tr><th>Lorem</th><th>Ipsum</th></tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, s
      ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    </tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
  </table>
                    

Stripped table

<table class="table-stripped">
  <tr><th>Lorem</th><th>Ipsum</th></tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
</table>
                              

Bordered & header primary table

 <table class="table-border table-header-primary">
  <tr><th>Lorem</th><th>Ipsum</th></tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
  <tr><td>Lorem</td><td>Ipsum</td></tr>
</table>
                    

Bordered & header primary & no bold

                              
<table class="table-border table-header-primary table-header-nobold">
  <tr>
    <th class="table-cell-empty"> </th>
    <th>Lorem</th>
    <th>Lorem</th>
  </tr>
  <tr>
    <th>Lorem</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Lorem</th>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <th>Lorem</th>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <th>Lorem</th>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
                  

Bordered & header grey

                              
                   <table class="table-border table-header-grey">
                    <tr>
                      <th class="table-cell-empty"> </th>
                      <th>Lorem</th>
                      <th>Lorem</th>
                    </tr>
                    <tr>
                      <th>Lorem</th>
                      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                    </tr>
                    <tr>
                      <th>Lorem</th>
                      <td>Lorem</td>
                      <td>Ipsum</td>
                    </tr>
                    <tr>
                      <th>Lorem</th>
                      <td>Lorem</td>
                      <td>Ipsum</td>
                    </tr>
                    <tr>
                      <th>Lorem</th>
                      <td>Lorem</td>
                      <td>Ipsum</td>
                    </tr>
                  </table>