Basic table | .table | The classname for applying general styling of Clarity tables to an HTML table. |
---|---|---|
Left-aligned table cells | .left | This classname on a td aligns content to the left edge of the table cell.This is not necessary for vertical tables. |
Tables without borders | .table-noborder | This classname removes borders between table rows and the border around the table. It also removes the background so that the table is transparent over its container background. |
Compact tables | .table-compact | This classname changes the height of the table rows from 36px to 24px. |
Vertical tables | .table-vertical | This classname removes the table header and applies table header styles to the left-most column. |
<table class="table table-vertical table-noborder table-compact">
<tbody>
<tr>
<th>Basic table</th>
<td>.table</td>
<td>...</td>
</tr>
<tr>
<th>Left-aligned table cells</th>
<td>.left</td>
<td>...</td>
</tr>
<tr>
<th>Tables without borders</th>
<td>.table-noborder</td>
<td>...</td>
</tr>
<tr>
<th>Compact tables</th>
<td>.table-compact</td>
<td>...</td>
</tr>
<tr>
<th>Vertical tables</th>
<td>.table-vertical</td>
<td>...</td>
</tr>
</tbody>
</table>