2.3 #Molecules.Table Table
Table layout.
Examples
Default styling
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--scedule
schedule layout
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--inline
no padding
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--inverted
bold body content instead of header
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--compact
less padding between cells
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--striped
striped table rows
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--bordered
bordered table
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
Markup
<table class="Table [modifier class]">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row col 1</td>
<td>Row col 2</td>
<td>Row col 3</td>
</tr>
<tr>
<td>Row col 1</td>
<td>Row col 2</td>
<td>Row col 3</td>
</tr>
</tbody>
</table>
Source:
components/molecules/table.less
, line 5