Section 9
#Tables
Tables
Default table. Use the table
class to get the table styles applied.
Attach any click
event directly to the <th>
for a larger click target.
These tables are responsive. They get the mobile view below the mobile breakpoint.
You need to add the data-label="{th - name}"
to the corresponding <td>
. See the markup below.
Turn row hover off by adding table--no-hover
Sometimes you don't want a resposive table? just add unresponsive
to table
option one | option two | |
---|---|---|
Desc | Pork Buns | Pork Buns |
price | $5.00 | $9.00 |
qty | 5 | 2 |
Example:
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Markup:
Markup
<table class="table">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Company">
Alfreds Futterkiste
</td>
<td data-label="Contact">
Maria Anders
</td>
<td data-label="Country">
Germany
</td>
</tr>
<tr>
<td data-label="Company">
Centro comercial Moctezuma
</td>
<td data-label="Contact">
Francisco Chang
</td>
<td data-label="Country">
Mexico
</td>
</tr>
<tr>
<td data-label="Company">
Ernst Handel
</td>
<td data-label="Contact">
Roland Mendel
</td>
<td data-label="Country">
Austria
</td>
</tr>
<tr>
<td data-label="Company">
Island Trading
</td>
<td data-label="Contact">
Helen Bennett
</td>
<td data-label="Country">
UK
</td>
</tr>
<tr>
<td data-label="Company">
Laughing Bacchus Winecellars
</td>
<td data-label="Contact">
Yoshi Tannamuri
</td>
<td data-label="Country">
Canada
</td>
</tr>
<tr>
<td data-label="Company">
Magazzini Alimentari Riuniti
</td>
<td data-label="Contact">
Giovanni Rovelli
</td>
<td data-label="Country">
Italy
</td>
</tr>
</tbody>
</table>
Source:
sass/_tables.scss
, line 8