Table

Generic table component.

Example

Name	Length (m)	Weight (kg)
John Doe	1.72	68
John Doe	1.72	68
John Doe	1.72	68

Implementation

<div>
  <table>
    <thead>
      <tr><th>...</th></tr>
    </thead>
    <tbody>
      <tr><td>...</td></tr>
    </tbody>
  </table>
</div>

About the wrapping div

the additional div wrapping the table in the below implementation is required if you want the table to horizontal scroll on smaller screens. The table needs to be the :only-child of this div.

Custom properties

There are several custom properties available that can be overwritten to control the looks of the table. You can change these properties on the table selector.

Custom property	Description
`--table-radius`	Sets the radius of the corners
`--table-color`	Sets the color of the borders and header