Horizontale scroll testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Basis

Visueel voorbeeld:

Let op: het effect van de horizontale scroll is alleen zichtbaar als de content niet meer binnen de schermbreedte past.

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op omliggende div

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll nowrap">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op table

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op thead

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel:</caption>
    <thead class="nowrap">
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>