Table - Responsive 3 rows

Open fullscreen

<table class="mp c-table c-table--responsive" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aeris</td>
      <td>Value 1.1</td>
      <td>Value 1.2</td>
    </tr>
    <tr>
      <td>OMNISEC</td>
      <td>Value 2.1</td>
      <td>Value 2.2</td>
    </tr>
  </tbody>
</table>

{
  "headers": [
    "Name",
    "Type",
    "Description"
  ],
  "rows": [
    [
      "Aeris",
      "Value 1.1",
      "Value 1.2"
    ],
    [
      "OMNISEC",
      "Value 2.1",
      "Value 2.2"
    ]
  ],
  "classes": "c-table--responsive"
}

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>