Toggle Index
Doesn't require additional class
| Menu | Exam ID | Type | Category | Name | Course | Year |
|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
{{#each .}}
<tr>
<td>
<dt>Header</dt>
<dd>Data</dd>
</td>
<td>
<dt>Header</dt>
<dd>Data</dd>
</td>
</tr>
{{/each}}
</table>
*Using #each, creates multiple rows of tr
Requires additional classes class='flex-table', class='table-header', class='table-item'
<div class="flex-table">
<div class="table-header">
<dl>
<dt>Header 1</dt>
</dl>
<dl>
<dt>Header 2</dt>
</dl>
</div>
{{#each .}}
<div class="table-item">
<dl>
<dt>Header</dt>
<dd>Data</dd>
</dl>
<dl>
<dt>Header</dt>
<dd>Data</dd>
</dl>
</div>
{{/each}}
</div>
*Using #each, creates multiple div.table-item
You can use class='table-menu'on a <dd> to create a menu section
<dt>Menu</dt>
<dd class="table-menu">
<a class="button default outline" href="#">Menu Item</a>
<a class="button default outline" href="#">Menu Item</a>
<a class="button default outline" href="#">Menu Item</a>
<a class="button default outline" href="#">Menu Item</a>
</dd>
You can use style='flex-grow: 2' to resize flex table columns.
Use it at both header and table rows
<table>
<tr>
<th>Header 1</th>
<th style="flex-grow: 2">Header 2</th>
</tr>
{{#each .}}
<tr>
<td>
<dt>Header</dt>
<dd>Data</dd>
</td>
<td style="flex-grow: 2">
<dt>Header</dt>
<dd>Data</dd>
</td>
</tr>
{{/each}}
</table>