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
| Lorem |
Ipsum |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| Lorem | Ipsum |
| Lorem | Ipsum |
| Lorem | Ipsum |
<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
| Lorem | Ipsum |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| Lorem | Ipsum |
| Lorem | Ipsum |
| Lorem | Ipsum |
<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
| Lorem | Ipsum |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| Lorem | Ipsum |
| Lorem | Ipsum |
| Lorem | Ipsum |
<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
| Lorem | Ipsum |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| Lorem | Ipsum |
| Lorem | Ipsum |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
<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>