Table

header header header
column column column
column column column
column column column
<table class="table">
  <thead>
    <tr>
      <th>header</th>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column</td>
      <td>column</td>
      <td>column</td>
    </tr>
    <tr>
      <td>column</td>
      <td>column</td>
      <td>column</td>
    </tr>
    <tr>
      <td>column</td>
      <td>column</td>
      <td>column</td>
    </tr>
  </tbody>
</table>

For alignment, the column width needs to be specified individually.

header header header
column column column
column column column
column column column
<table class="table">
  <thead>
    <tr class="flex position-relative">
      <th class="table__cell--action">
        <label class="button button--icon">
          <input type="checkbox">
        </label>
      </th>
      <th>header</th>
      <th class="flex-grow-1">header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="flex position-relative">
      <td class="table__cell--action">
        <a href="#" class="stretched-link"></a>
        <label class="button button--icon">
          <input type="checkbox">
        </label>
      </td>
      <td>column</td>
      <td class="flex-grow-1">column</td>
      <td>column</td>
    </tr>
    <tr class="flex position-relative">
      <td class="table__cell--action">
        <a href="#" class="stretched-link"></a>
        <label class="button button--icon">
          <input type="checkbox">
        </label>
      </td>
      <td>column</td>
      <td class="flex-grow-1">column</td>
      <td>column</td>
    </tr>
    <tr class="flex position-relative">
      <td class="table__cell--action">
        <a href="#" class="stretched-link"></a>
        <label class="button button--icon">
          <input type="checkbox">
        </label>
      </td>
      <td>column</td>
      <td class="flex-grow-1">column</td>
      <td>column</td>
    </tr>
  </tbody>
</table>