Responsiva tabeller

Hur skapar man responsiva tabeller?

På den här sidan visar jag tre metoder som kan användas för att göra responsiva tabeller. Metoderna är hämtade från Simon Elverys sammanställning. Tipsa gärna i kommentarsfältet om fler metoder eller berätta om du tycker att någon viss metod är att föredra.

Metod 1: Dölja kolumner

Den här tekniken går ut på att man väljer att endast visa det väsentligaste på mindre skärmar. Källa: Stuart Curry.

Exempel

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
ABY ADITYA BIRLA MINERALS LIMITED $0.77 +0.02 2.00% $0.76 $0.77 $0.76 54,567
ACR ACRUX LIMITED $3.71 +0.01 0.14% $3.70 $3.72 $3.68 191,373
ADU ADAMUS RESOURCES LIMITED $0.72 0.00 0.00% $0.73 $0.74 $0.72 8,602,291
AGG ANGLOGOLD ASHANTI LIMITED $7.81 -0.22 -2.74% $7.82 $7.82 $7.81 148
AGK AGL ENERGY LIMITED $13.82 +0.02 0.14% $13.83 $13.83 $13.67 846,403
AGO ATLAS IRON LIMITED $3.17 -0.02 -0.47% $3.11 $3.22 $3.10 5,416,303

Kod

Tillvägagångssättet utgår från att du vet vilket index de kolumner som ska döljas har. Det är inte säkert att det alltid går att veta och metoden är inte riktigt semantisk. En annan möjlighet är att ge <th> och <td> klasser med utgångpunkt i hur viktiga de är för förståelsen av innehållet och koda CSS:en därefter.

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Company</th>
      <th class="numeric">Price</th>
      <th class="numeric">Change</th>
      <th class="numeric">Change %</th>
      <th class="numeric">Open</th>
      <th class="numeric">High</th>
      <th class="numeric">Low</th>
      <th class="numeric">Volume</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AAC</td>
      <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
      <td class="numeric">$1.38</td>
      <td class="numeric">-0.01</td>
      <td class="numeric">-0.36%</td>
      <td class="numeric">$1.39</td>
      <td class="numeric">$1.39</td>
      <td class="numeric">$1.38</td>
      <td class="numeric">9,395</td>
    </tr>
  </tbody>
</table>
@media only screen and (max-width: 800px) {
  #unseen table td:nth-child(2), 
  #unseen table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
  #unseen table td:nth-child(4),
  #unseen table th:nth-child(4),
  #unseen table td:nth-child(7),
  #unseen table th:nth-child(7),
  #unseen table td:nth-child(8),
  #unseen table th:nth-child(8){display: none;}
}

Metod 2: Skrolla i sidled (Flip Scroll)

En fullständig beskrivning av den här tekniken finns beskriven i David Bushells inlägg Responsive Tables (2). Passa även på att titta på David Bushells responsive calendar proof of concept.

Exempel

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
ABY ADITYA BIRLA MINERALS LIMITED $0.77 +0.02 2.00% $0.76 $0.77 $0.76 54,567
ACR ACRUX LIMITED $3.71 +0.01 0.14% $3.70 $3.72 $3.68 191,373
ADU ADAMUS RESOURCES LIMITED $0.72 0.00 0.00% $0.73 $0.74 $0.72 8,602,291
AGG ANGLOGOLD ASHANTI LIMITED $7.81 -0.22 -2.74% $7.82 $7.82 $7.81 148
AGK AGL ENERGY LIMITED $13.82 +0.02 0.14% $13.83 $13.83 $13.67 846,403
AGO ATLAS IRON LIMITED $3.17 -0.02 -0.47% $3.11 $3.22 $3.10 5,416,303

Kod

Nyckel till att få den här tekniken att fungera är att använda display: inline-block; på table row och white-space: nowrap; på table body.

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Company</th>
      <th class="numeric">Price</th>
      <th class="numeric">Change</th>
      <th class="numeric">Change %</th>
      <th class="numeric">Open</th>
      <th class="numeric">High</th>
      <th class="numeric">Low</th>
      <th class="numeric">Volume</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AAC</td>
      <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
      <td class="numeric">$1.38</td>
      <td class="numeric">-0.01</td>
      <td class="numeric">-0.36%</td>
      <td class="numeric">$1.39</td>
      <td class="numeric">$1.39</td>
      <td class="numeric">$1.38</td>
      <td class="numeric">9,395</td>
    </tr>
  </tbody>
</table>
@media only screen and (max-width: 800px) {
  #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  #flip-scroll * html .cf { zoom: 1; }
  #flip-scroll *:first-child+html .cf { zoom: 1; }
	
  #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

  #flip-scroll th,
  #flip-scroll td { margin: 0; vertical-align: top; }
  #flip-scroll th { text-align: left; }
	
  #flip-scroll table { display: block; position: relative; width: 100%; }
  #flip-scroll thead { display: block; float: left; }
  #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  #flip-scroll thead tr { display: block; }
  #flip-scroll th { display: block; text-align: right; }
  #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
  #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }

  /* sort out borders */
  #flip-scroll th { border-bottom: 0; border-left: 0; }
  #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
  #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
  #flip-scroll th:last-child,
  #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}

Metod 3: Inga tabeller

Den här tekniken har utvecklats av Chris Coyier (@chriscoyier) och finns dokumenterad i hans inlägg Responsive Data Tables på css-tricks.com.

Exempel

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
ABY ADITYA BIRLA MINERALS LIMITED $0.77 +0.02 2.00% $0.76 $0.77 $0.76 54,567
ACR ACRUX LIMITED $3.71 +0.01 0.14% $3.70 $3.72 $3.68 191,373
ADU ADAMUS RESOURCES LIMITED $0.72 0.00 0.00% $0.73 $0.74 $0.72 8,602,291
AGG ANGLOGOLD ASHANTI LIMITED $7.81 -0.22 -2.74% $7.82 $7.82 $7.81 148
AGK AGL ENERGY LIMITED $13.82 +0.02 0.14% $13.83 $13.83 $13.67 846,403
AGO ATLAS IRON LIMITED $3.17 -0.02 -0.47% $3.11 $3.22 $3.10 5,416,303

Kod

För att den här tekniken ska fungera krävs att du använder  HTML5 data attributes och adresserar dem genom CSS för att specificera kolumnrubrikerna.  Det går också att hårdkoda kolumnrubrikerna i CSS:en, men det är inte att rekommendera eftersom den gyllene regeln lyder att separera innehåll från presentation.

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Company</th>
      <th class="numeric">Price</th>
      <th class="numeric">Change</th>
      <th class="numeric">Change %</th>
      <th class="numeric">Open</th>
      <th class="numeric">High</th>
      <th class="numeric">Low</th>
      <th class="numeric">Volume</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Code">AAC</td>
      <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
      <td data-title="Price" class="numeric">$1.38</td>
      <td data-title="Change" class="numeric">-0.01</td>
      <td data-title="Change %" class="numeric">-0.36%</td>
      <td data-title="Open" class="numeric">$1.39</td>
      <td data-title="High" class="numeric">$1.39</td>
      <td data-title="Low" class="numeric">$1.38</td>
      <td data-title="Volume" class="numeric">9,395</td>
    </tr>
  </tbody>
</table>
@media only screen and (max-width: 800px) {
	
  /* Force table to not be like tables anymore */
  #no-more-tables table, 
  #no-more-tables thead, 
  #no-more-tables tbody, 
  #no-more-tables th, 
  #no-more-tables td, 
  #no-more-tables tr { 
    display: block; 
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #no-more-tables tr { border: 1px solid #ccc; }

  #no-more-tables td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
    white-space: normal;
    text-align:left;
  }

  #no-more-tables td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  /* Label the data */
  #no-more-tables td:before { content: attr(data-title); }
}