Voorbeelden

Nowrap op een paragraaf

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>
                
              

Tabel met nowrap

Visueel voorbeeld:

Html-voorbeeld

                
<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel met "nowrap":</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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>
                
              

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 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>