<table class="ch-table ch-width--12">
  <thead>
    <tr>
      <th>Name</th>
      <th>Genre</th>
      <th>Release date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

Outer border

You could add an outer border to the table with ch-ba--1 ch-bc--grey-3.

---

Bordered cells

<table class="ch-table ch-table--bordered ch-width--12">
  <thead>
    <tr>
      <th>Name</th>
      <th>Genre</th>
      <th>Release date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

---

Striped rows

<table class="ch-table ch-table--bordered ch-table--striped ch-width--12">
  <thead>
    <tr>
      <th>Name</th>
      <th>Genre</th>
      <th>Release date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

---

Other modifier classes

ch-table--responsive

A table which scrolls horizontally at smaller breakpoints.

---

ch-table--compact

Tighter cell padding at larger breakpoints.

---

ch-table--hover

Rows are highlighted when the user hovers over them.

---