640x480.de

Responsive Tables – Flexibel reagierende Tabellen

Um breite bzw. komplexe Tabellen auch auf kleinen Monitoren zugänglich zu machen, gibt es verschiedene Möglichkeiten. In einem unserer Projekte haben wir vor einiger Zeit eine reine CSS-Lösung angewendet, die hier kurz dokumentiert wird.

Wie der Kulturbanause in einem Beitrag so schön zusammengefasst hat, kann man das Problem auf verschiedenen Wegen lösen:

1. Zoom ermöglichen
2. Scrolling mit festem Tabellenkopf anbieten
3. Platz sparen – was man sowieso für kleine Monitore machen sollte
4. Inhalte abkürzen/ zusammenfassen
5. Inhalte umstrukturieren (mit CSS und/oder Javascript)

Wir haben uns für Option 5 auf reiner CSS-Basis entschieden, hier der Quelltext:

<table>
  <thead>
    <tr>
      <th>Datum</th>
      <th>Ort</th>
      <th>Veranstaltung</th>
      <th>Sachgebiet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20.08.2014</td>
      <td>Düsseldorf</td>
      <td>Architektenkammer Nordrhein-Westfalen<br>Bauüberwachung und Recht</td>
      <td>Rechtliche Aspekte</td>
    </tr>
    <tr>
      <td>20.08.2014</td>
      <td>Düsseldorf</td>
      <td>Architektenkammer Nordrhein-Westfalen<br>Brandschutzkonzept – Trainingsseminar – Veranstaltungsreihe Brandschutz</td>
      <td>Sachverständigenwesen</td>
    </tr>
    <tr>
      <td>20.08.2014</td>
      <td>Düsseldorf</td>
      <td>Architektenkammer Nordrhein-Westfalen<br>Die neue HOAI 2013 – Was Sie bei Vertragsgestaltung und Honorarabrechnung beachten müssen</td>
      <td>Kaufmännische Grundlagen/ Büroorganisation</td>
    </tr>
  </tbody>
</table>

Desktop first :)

Mittlerer Screen

@media only screen and (max-width:640px) {
	table, thead, tbody, th, td, tr { 
		display:block; 
	}
	thead {
		/* optisch versteckt, 
		aber für Screenreader zugänglich */
		tr {
			border:0;
			clip:rect(0 0 0 0);
			height:1px;
			margin:-1px;
			overflow:hidden;
			padding:0;
			position:absolute;
			width:1px;
		}
	}
	td { 
		position:relative;
		padding-left:50%; 
	}
	td:first-child {
		padding-left:50%;
	}
	td:before { 
		position:absolute;
		top:0.5em;
		left:0;
		width:45%; 
		padding-right:5%;
		white-space:nowrap;
	}
	td:nth-of-type(1):before { content:"Datum"; }
	td:nth-of-type(2):before { content:"Ort"; }
	td:nth-of-type(3):before { content:"Veranstaltung"; }
	td:nth-of-type(4):before { content:"Sachgebiet"; }
}

Kleiner Screen

@media only screen and (max-width:480px) {
	td { 
		padding-left:0; 
	}
	td:first-child {
		padding-left:0;
	}
	td:before { 
		top:0;
		width:0; 
		padding-right:0;
	}
	td:nth-of-type(1):before { content:""; }
	td:nth-of-type(2):before { content:""; }
	td:nth-of-type(3):before { content:""; }
	td:nth-of-type(4):before { content:""; }
}

Fazit

Für diese kleine Tabellen-Umorganisation war die CSS-Lösung ganz gut, ließ sich schnell implementieren und funktioniert auch, soweit ich das bisher gesehen habe, überall. Für wirklich große Tabellen würde ich aber auf eine komfortablere Lösung mit Javascript setzen – am besten natürlich so, dass der Nutzer sich selbst aussuchen kann, welche Spalten er in welcher Reihenfolge braucht, welche ausgeblendet werden sollen, ob der Tabellenkopf links oder oben steht und so weiter.

Projekt

Fortbildungsportal der Architektenkammern der Länder
Auftraggeber: Bundesarchitektenkammer, Berlin
www.architekten-fortbildung.de

Links

zu jQuery-basierten Javascript-Lösungen, die ich aber beide nicht ausprobiert habe:

• github.com/bradvin/FooTable
• github.com/paulopmx/Flexigrid