Responsive Data Tables

Garrett Dimon

Datenstabellen sind nicht gut für responsives Design geeignet. Nur so als Info.

Er hat einen guten Punkt. Datentabellen können ziemlich breit sein, und das aus gutem Grund. Eine einzelne Datenzeile muss zusammengehalten werden, um in einer Tabelle Sinn zu ergeben. Tabellen können sich in der Breite dehnen, aber sie können nur so schmal werden, bevor sie den Zelleninhalt unangenehm umbrechen oder einfach nicht mehr schmaler werden.

Responsive Design bedeutet, Designs anzupassen, um Bildschirme unterschiedlicher Größe zu berücksichtigen. Was also passiert, wenn ein Bildschirm schmaler ist als die minimale Breite einer Datentabelle? Sie können herauszoomen und die gesamte Tabelle sehen, aber die Textgröße ist zu klein, um sie lesen zu können. Oder Sie können auf Lesbarkeit zoomen, aber das Durchsuchen der Tabelle erfordert sowohl vertikales als auch (trauriger Smiley) horizontales Scrollen.

Also, das werden wir jetzt tun…

Wir werden „Responsive Design“-Prinzipien (CSS @media queries) verwenden, um zu erkennen, ob der Bildschirm kleiner ist als die maximale Quetschbarkeit unserer Tabelle. Wenn ja, werden wir die Tabelle neu formatieren.

Wir sind brav und nutzen hier Plain Ol’ Semantic Markup für unsere Tabelle. **Bare bones** Beispiel

<table>
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Job Title</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>James</td>
		<td>Matman</td>
		<td>Chief Sandwich Eater</td>
	</tr>
	<tr>
		<td>The</td>
		<td>Tick</td>
		<td>Crimefighter Sorta</td>
	</tr>
	</tbody>
</table>

Unser normales CSS ist nichts Besonderes

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

Der kleine, responsive Kram kommt jetzt. Wir haben bereits herausgefunden, dass unsere minimale Tabellenbreite etwa 760 Pixel beträgt, also werden wir unsere Media Query so einrichten, dass sie greift, wenn sie schmaler als das ist. Außerdem zielen wir auf iPads ab, da sie genau in dieser Zone liegen.

Die größte Änderung ist, dass wir *die Tabelle dazu bringen, sich nicht wie eine Tabelle zu verhalten*, indem wir jedes tabellenbezogene Element als block-level definieren. Indem wir dann die ursprünglich hinzugefügten Zebra-Streifen beibehalten, ist es so, als würde jede Tabellenzeile zu einer eigenen Tabelle werden, aber nur so breit wie der Bildschirm. Kein horizontales Scrollen mehr! Dann verwenden wir für jede „Zelle“ CSS-generierten Inhalt (:before), um das Label anzuwenden, damit wir wissen, was jedes Datenstück bedeutet.

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	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;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Secret Alias"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Und so erhalten Desktops das normale Tabellenerlebnis, und Mobilgeräte (oder andere kleine Bildschirme) erhalten eine neu formatierte und leichter zu erkundende Tabelle.

Hey, was ist mit IE?

IE 9 und darunter mögen es nicht, wenn Sie Tabellenelemente als display: block; setzen. Es macht komische Dinge und funktioniert nicht richtig. Aber IE 9 unterstützt Media Queries. Meine Lösung bisher ist, die Media-Query-Stile in bedingte Kommentare zu packen.

<!--[if !IE]><!-->
<style>
   /* table-related media query stuff only */
</style>
/* Or an external stylesheet or whatever */
<!--<![endif]-->

Wenn das Problem *nur* darin bestünde, dass ältere Versionen von IE keine Media Queries unterstützen, könnten wir das Projekt css3-mediaqueries-js (Polyfill-Unterstützung für alle Media Queries) oder Respond (auch Polyfill, viel kleiner, aber unterstützt nur min/max-width) verwenden. Beide funktionieren sehr gut. Aber das ist in diesem Fall nicht unser Problem.

Das alles funktioniert gut in IE 10 und IE 10 ignoriert auch bedingte Kommentare, sodass die Stile funktionieren, auch wenn sie in !IE-Konditionalen eingeschlossen sind.

Sehen Sie es

Es gibt zwei Seiten für die Demo, eine mit der responsiven Tabellenlösung und einen Link zur nicht-responsiven Version, damit Sie hin und her springen können, um das Problem zu sehen.

Demo ansehen

In der Demo verwende ich ein paar zusätzliche Media Queries für Mobilgeräte, um den Body auf bestimmte Breiten zu zwingen, damit er nicht zickig wird. Quellcode anzeigen, um ihn zu schnappen.

Das ist nicht perfekt…

Dies ist nur eine mögliche Lösung für das Problem von Datentabellen auf kleinen Bildschirmen. Es ist nicht perfekt. Es mag einige Barrierefreiheitsprobleme geben (oder vielleicht auch nicht, ich bin mir wirklich nicht sicher). Wahrscheinlich gibt es einige ausgefeilte JavaScript-Lösungen, die Dinge anders angehen und auch großartig funktionieren könnten. Wenn andere Lösungen dafür auftauchen, werde ich diese Seite aktualisieren.

UPDATE: Andere Ideen

Scott Jehl hat zwei alternative Ideen entwickelt, die beide sehr cool und sehr unterschiedlich zu dieser sind. Dies unterstreicht einen wichtigen Punkt: Es hängt vom spezifischen Kontext Ihrer Datentabelle ab, welche Lösung Sie wählen.

Eine davon erstellt ein Tortendiagramm aus den Daten in der Tabelle. Auf schmaleren Bildschirmen wird das Tortendiagramm angezeigt und die Tabelle ausgeblendet, andernfalls wird nur die informationsreichere Tabelle angezeigt. Arguably, die mobile Version ist nützlicher!

Die nächste Idee (Scott schreibt Todd Parker die Credits zu) ist, die Tabelle auf schmalen Bildschirmen in eine Miniaturansicht einer Tabelle zu verwandeln, anstatt die gesamte Tabelle anzuzeigen. Dies zeigt dem Benutzer, dass hier eine Datentabelle zu sehen ist, beeinträchtigt aber den Inhalt kaum. Klicken Sie auf die Tabelle, Sie werden zu einem speziellen Bildschirm zur Ansicht der Tabelle weitergeleitet, und klicken Sie, um zurückzukehren.

Demo ansehen

Mobile First Version von Derek Pennycuff.

Version, die mit divs beginnt und die Labels werden durch Pseudo-Elemente und data-attributes von Mobifreaks generiert.

Nur unwesentliche Dinge verstecken Version von Stewart Curry

Generiere mobile Versionen direkt (ohne die Divs) von Hannes Kirsman basierend auf diesem Gist (Live-Demo).