Tables

Although Raute uses responsive tables, they are not best practice for mobile devices. Try using the least possible amount of columns.

Label Label Label
Label Label Label
<div class="responsive-table">
  <table data-tag="Normal table">
    <thead>
      <tr>
        <th>
          Label
        </th>
        <th>
          Label
        </th>
        <th>
          Label
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          Label
        </td>
        <td>
          Label
        </td>
        <td>
          Label
        </td>
      </tr>
    </tbody>
  </table>
</div>
Label Label Label Label Label
Value Value Value Value Value
Value Value Value Value Value
Legend text here
<div class="responsive-table">
  <table class="mt-5">
    <tbody>
      <tr>
        <td>Label</td>
        <td>Label</td>
        <td>Label</td>
        <td>Label</td>
        <td>Label</td>
      </tr>
      <tr>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
      </tr>
      <tr>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
        <td data-name="name">Value</td>
      </tr>
    </tbody>
</table>
</div>
<div class="mb-1 text-right text-sm font-semibold py-1">
  Legend text here
</div>
© Raute Corporation 2021