Bloggerschmidt


Hier schreibt Alexander Schmidt, Webentwickler und CSS Guru



JD15DE_banner_88x31.png

HTML table: Responsive Tabellen mit CSS

Tabellarischer Inhalt gehört in Tabellen. Doch um diese auf dem Smartphone korrekt anzuzeigen, bedarf es eines Kniffs: Man drehe die Spalten und Zeilen um und lässt die Tabelle horizontal scrollen. Das funktioniert auch mit dem Daumen. So geht’s.

Die Tabelle

Dafür brauchen wir tabellarischen Inhalt, z. B.:

<table>
	<thead>
		<tr>
			<th>Berlin</th>
			<th>Hamburg</th>
			<th>M&uuml;nchen</th>
			<th>Frankfurt</th>
			<th>Bad&nbsp;Nauheim</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Milj&ouml;h</td>
			<td>Kiez</td>
			<td>Bierdampf</td>
			<td>Sachsenhausen</td>
			<td>Kolonnaden</td>
		</tr>
		<tr>
			<td>Buletten</td>
			<td>Frikadellen</td>
			<td>Fleischpflanzerl</td>
			<td>Gr&uuml;ne So&szlig;e</td>
			<td>Irgendwas mit Elvis</td>
		</tr>
		<tr>
			<td>Siegessäule</td>
			<td>Elbtunnel</td>
			<td>Hofbr&auml;uhaus</td>
			<td>Goetheturm</td>
			<td>Elvis-Boulevard</td>
		</tr>
		<tr>
			<td>Assoziation&nbsp;1</td>
			<td>Assoziation&nbsp;2</td>
			<td>Assoziation&nbsp;3</td>
			<td>Assoziation&nbsp;4</td>
			<td>Assoziation&nbsp;5</td>
		</tr>
	</tbody>
</table>

Gut. Das ist eine Tabelle. Nutzen wir das Bootstrap-Framework, dann sieht sie mithilfe der Klassen table table-bordered table-striped sogar gut aus.

Drehung der Tabelle mit CSS

Um die Tabelle zu drehen, wenn das Browserfenster kleiner als 600px ist, brauchen wir eine Helfer-ID. Nennen wir sie mal id="rotator".

<div id="rotator">
	<table class="table table-bordered table-striped">
		...
	</table>
</div>

Mit dieser ID schreiben wir unser CSS.

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

	#rotator table {
		display: block;
		position: relative;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
	#rotator thead {
		display: block;
		float: left;
	}
	#rotator tbody {
		display: block;
		width: auto;
		position: relative;
		overflow-x: auto;
		white-space: nowrap;
	}
	#rotator th,
	#rotator td {
		margin: 0;
		vertical-align: top;
	}
	#rotator th {
		text-align: left;
		border-top: 1px solid white;
		display: block;
		text-align: right;
		border-bottom: 0;
		border-left: 0;
	}
	#rotator th:first-child {
		border-top: 0 none;
	}
	#rotator td {
		display: block;
		min-height: 1.25em;
		text-align: left;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	#rotator thead tr {
		display: block;
	}

	#rotator tbody tr {
		display: inline-block;
		vertical-align: top;
		border-left: 1px solid #babcbf;
	}
	#rotator tbody tr:first-child {
		border-left: 0 none;
	}
	#rotator tbody td:first-child {
		border-top: 0 none;
	}

}

Muah! Was passiert denn hier?! Ein bissl CSS-Kung-Fu. Die ID #rotator hilft uns unsere Tabelle neu zu definieren. Die neue Darstellung wird im Großen und Ganzen über display: block; gewährleistet. Ist das Attribut gesetzt, wird der Tabellenkopf thead links ausgerichtet über float: left;. Der Tabellenrumpf tbody bekommt dann noch ein overflow-x: auto;, damit ein horizontaler Balken fürs Scrollen erscheint. Der Rest ist Kosmetik.