Tables
Styling for tables.
| Project | Project | Project | Project | Project |
|---|---|---|---|---|
| Value 1 | Value 1 | Value 1 | Value 1 | Value 1 |
| Value 1 | Value 1 | Value 1 | Value 1 | Value 1 |
| Value 1 | Value 1 | Value 1 | Value 1 | Value 1 |
<table class="c-table">
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__cell c-table__cell--head">Project</th>
<th class="c-table__cell c-table__cell--head">Project</th>
<th class="c-table__cell c-table__cell--head">Project</th>
<th class="c-table__cell c-table__cell--head">Project</th>
<th class="c-table__cell c-table__cell--head">Project</th>
</tr>
</thead>
<tbody>
<tr class="c-table__row">
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
<td class="c-table__cell">Value 1</td>
</tr>
</tbody>
</table>
Responsive Tables
Tables are responsive by default but if you have a large table with a lot of content then you need to wrap your table with on of these classes:
c-table-resposnivec-table-resposnive@mobilec-table-resposnive@tabletc-table-resposnive@desktopc-table-resposnive@wide
Each one of these classes will force the table to take full width and show hoizontal scrollbar based on the breakpoint specified.
For example: c-table-resposnive@tablet would force the table on viewports less than the tablet breakpoint to take full width and show horizontal scrollbar.
<div class="c-table-responsive@tablet">
<table class="c-table">
...
</table>
</div>