Menu

Table - Vertical headers

<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>
{
"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>