<table class="mp c-table " >
<thead>
<tr>
<th>Name</th>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<th>Aeris</th>
<td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</td>
</tr>
<tr>
<th>OMNISEC</th>
<td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
</tr>
</tbody>
</table>
Table - Vertical headers
{
"headers": [
"Name",
"Description"
],
"rows": [
[
"Aeris",
"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."
],
[
"OMNISEC",
"Nullam quis risus eget urna mollis ornare vel eu leo."
]
],
"theme": "vertical"
}
Responsive variant
For the .c-table--responsive
variant to display correctly, give each <td>
element a data-responsive-title
attribute, corresponding to the column headers. E.g. for a two-column table where the column headers are "Name" and "Description", the <td>
s should be marked up as follows:
<tbody>
<tr>
<td data-responsive-title="Name">Aeris</td>
<td data-responsive-title="Description">Vivamus sagittis lacus vel</td>
</tr>
<tr>
<td data-responsive-title="Name">OMNISEC</td>
<td data-responsive-title="Description">Nullam quis risus eget urna</td>
</tr>
</tbody>