Designsystem - Tabeller

Tabellkomponenter for å presentere sorterte data på en effektiv måte.

Vanlig tabell

Overskrift 1	Overskrift 2	Overskrift 3	Overskrift 4
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne

<div class="table-wrapper">
  <table class="table table--normal">
    <thead>
      <tr>
        <th>Overskrift 1</th>
        <th>Overskrift 2</th>
        <th>Overskrift 3</th>
        <th>Overskrift 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
    </tbody>
  </table>
</div>

Stripet tabell

Overskrift 1	Overskrift 2	Overskrift 3	Overskrift 4
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne

Tabel (uten js)

Overskrift 1	Overskrift 2	Overskrift 3	Overskrift 4
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne
Kolonne	Kolonne	Kolonne	Kolonne

<div class="table-wrapper">
  <table class="table table--zebra">
    <thead>
      <tr>
        <th>Overskrift 1</th>
        <th>Overskrift 2</th>
        <th>Overskrift 3</th>
        <th>Overskrift 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
    </tbody>
  </table>
</div>

<br><br>

<h4 class="section-title margin-top--large">Tabel (uten js)</h4>
<div class="table-responsive-wrapper">
  <table class="table-responsive">
    <thead>
      <tr>
        <th>Overskrift 1</th>
        <th>Overskrift 2</th>
        <th>Overskrift 3</th>
        <th>Overskrift 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
      <tr>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
        <td>Kolonne</td>
      </tr>
    </tbody>
  </table>
</div>