Tests en voorbeelden
nowrap op een p
Toelichting: In dit voorbeeld wordt er ook gebruik gemaakt van de helper-class horizontal-scroll om te voorkomen dat het voorbeeld-element de layout van de pagina breekt. Zonder deze toevoeging
zou de tekst het scherm uitlopen. De class horizontal-scroll voegt op de maximale
beschikbare breedte de scrollbalk toe.
Visueel voorbeeld:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML-voorbeeld:
<p class="nowrap horizontal-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
nowrap op omliggende div van een table
Visueel voorbeeld:
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:
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:
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>
nowrap op tbody
Visueel voorbeeld:
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 class="nowrap">
<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>
nowrap op een tr
Visueel voorbeeld:
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 class="nowrap">
<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>
nowrap op een td
Visueel voorbeeld:
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>
<th scope="col">Table header heading 8</th>
<th scope="col">Table header heading 9</th>
<th scope="col">Table header heading 10</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis.
</td>
<td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
</tr>
<tr>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
</tr>
<tr>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
</tr>
<tr>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</td>
<td>Dolor set</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>