Echt responsive Tabellen

Was sind responsive Tabellen?

Responsives Verhalten ist heute Pflicht für die meisten Web-Anwendungen. Tabellen werden dabei meist als Problem wahrgenommen. Auch Bootstraps Antwort auf responsive Tabellen ist nicht immer befriedrigend. Letztlich leistet es das HTML-Element <table> einfach nicht. Komplexe Tabellen mit vielen Spalten lassen sich nicht beliebig verdichten:

Dieselbe Tabelle könnte sich aber auch in eine Liste verwandeln, die vollständig responsiv ist.

Die Tabelle als Basis

Nun erzeugen aber viele Grids ihre Darstellung mit Tabellen. Darauf zu verzichten ist oft nicht möglich und mit erheblichem Aufwand verbunden. Glücklicherweise kann die Darstellung von Tabellen mit CSS 3 weitgehend angepasst werden. Was damit nicht geht, erledigt HTML 5. Auf JavaScript kann dabei verzichtet werden. Hier der Code der Tabelle aus den letzten beiden Abbildungen:

  

    

      
Code
      
Firma
      
Preis
      
Änderung
      
In %
      
Eröffnung
      
Höchster
      
Niedrigster
      
Volumen
    
  
  

    

      
MSF
      
Microsoft
      
$51.38
      
-0.01
      
-0.36%
      
$51.39
      
$51.39
      
$51.38
      
9,395
    
    

      
APC
      
Apple
      
$95.46
      
-0.03
      
-0.45%
      
$91.88
      
$99.15
      
$91.38
      
7,741
    
  

Verhalten mit CSS steuern

Das passende CSS dazu sieht folgendermaßen aus. Es wird durch das @media-Element nur wirksam, wenn die Bildschirmbreite unter 768px fällt.

@media only screen and (max-width: 768px) {

  /* Verhindert das Standardverhalten einer Tabelle */
  #notable table,
  #notable thead,
  #notable tbody,
  #notable th,
  #notable td,
  #notable tr {
    display: block;
  }

    /* Kopfbereich verstecken */
    #notable thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

  #notable tr {
    border: 1px solid #ccc;
  }

  #notable td {
    /* Verhalten einer Reihe */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  }

    #notable td:before {
      /* Neuer Kopfbereich */
      position: absolute;
      /* Simulation der Abstände */
      top: 6px;
      left: 6px;
      width: 145%;
      padding-right: 10px;
      white-space: nowrap;
      text-align: left;
      font-weight: bold;
      /* Überschriften aus data-title="" holen */
      content: attr(data-title);
    }

}

Elegante Automation mit JavaScript

Der einzige Mehraufwand besteht darin, wiederholt die Label mit data-title="" zu bestimmen. Hier kann etwas JavaScript (mit jQuery) helfen, indem die Kopffelder automatisiert kopiert werden:

$(function () {
  var t = [];
  $('thead th').each(function () {
    t.push($(this).text());        
  });
  $('tbody tr').each(function() {
    $(this).find('td').each(function(i, e) {
      $(e).attr('data-title', t[i]);
    });
  });
});

Das Skript sucht nach den Kopffeldern und erstellt daraus ein Array (Zeile 4). Dann wird nach den Reihen gesucht (Zeile 6) und in jeder Reihe das data-Attribut jedes Elements aus dem Array befüllt (Zeile 8). Die wiederholte Angabe von data-title="Code" usw. ist nicht mehr notwendig und kann vollständig entfernt werden.

Dieser Text ist aus meinem Buch zu Bootstrap 3.