Tabell för superredaktörer

Tillgänglig tabell

Det som gör tabellen tillgänglig är

1. divven med klassen wide-table
2. caption
3. thead
4. th
5. scope=col.

Om den här tabellen visas i ett fönster som är smalare än tabellen, kan tabellen skrollas i sidled.

Det här är koden till en tillgänglig tabell, tabellen syns längre ner:

<div class="wide-table">
 <table class="mb-none" style="width: 100%; border-collapse: collapse;" tabindex="0" border="1">
  <caption>Bred tabell som kan skrollas
  </caption>
  <thead>
   <tr>
    <th scope="col">Kolumn 1</th>
    <th scope="col">Kolumn 2</th>
    <th scope="col">Kolumn 3</th>
    <th scope="col">Kolumn 4</th>
    <th scope="col">Kolumn 5</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Cell A1</td>
    <td>Cell A2</td>
    <td>Cell A3</td>
    <td>Cell A4</td>
    <td>Cell A5</td>
   </tr>
   <tr>
    <td>Cell B1</td>
    <td>Cell B2</td>
    <td>Cell B3</td>
    <td>Cell B4</td>
    <td>Cell B5</td>
   </tr>
   <tr>
    <td>Cell C1</td>
    <td>Cell C2</td>
    <td>Cell C3</td>
    <td>Cell C4</td>
    <td>Kommunalfullmäktigesammanträdesprotokoll</td>
   </tr>
  </tbody>
 </table>
</div>

Koden ovan ger detta tabellutseende:

I tabellen ovan har ett ”Avbrottsfritt mellanrum” lagts in efter orden ”Kolumn” så att siffran inte ska hamna på en egen rad. ”Avbrottsfritt mellanrum” hittar du i editorns meny.

Mjuk radbrytning

För att minimera risken för skroll, lägg in mjuk radbrytning där de långa orden kan avstavas. En mjuk radbryning skapas genom att skriva tre bindestreck efter varandra.

I tabellen nedan avstavas de långa orden vid behov. Ändra skärmens bredd för att se hur mjuk radbrytning fungerar.