Nicht-Responsive Tabellen können einem schnell das responsive Webdesign kaputt machen und sorgen für ein unschönes Gesamtbild und schlechte Usability. Daher möchte ich euch einmal zeigen wie man responsive Tabellen ziemlich einfach anlegt um die genannten Punkte zu vermeiden.

Hierfür möchte ich ich 2 Beispiele aufzeigen:

  1. Responsive Tabellen mit CSS
  2. Responsive Tabellen mit CSS und „Spezial Code“

 

1. Responsive Tabellen mit CSS

Das gewünschte Ergebnis:

Land Hauptstadt Sprache
Deutschland Berlin Deutsch
Dänemark Kopenhagen Dänisch
Türkei Ankara Türkisch

Der HTML Code für genau diese responsive Tabelle:

<table class="tabelle-responsive">
<thead>
<tr>
<th>Land</th>
<th>Hauptstadt</th>
<th>Sprache</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Land">Deustchland</td>
<td data-label="Hauptstadt">Berlin</td>
<td data-label="Sprache">Deutsch</td>
</tr>
<tr>
<td data-label="Land">Dänemark</td>
<td data-label="Hauptstadt">Kopenhagen</td>
<td data-label="Sprache">Dänisch</td>
</tr>
<tr>
<td data-label="Land">Türkei</td>
<td data-label="Hauptstadt">Ankara</td>
<td data-label="Sprache">Türkisch</td>
</tr>
</tbody>
</table>

Und der zugehörige CSS Code für die responsive Tabelle:

.tabelle-responsive table {
	display: table;
	border: 1px solid silver;
	border-collapse:collapse;
	width: 100%;
}

.tabelle-responsive table, td, tr, th {
	border-collapse: collapse;
	text-align: left;
}

.tabelle-responsive td, tr, th {
	padding:1em;
        vertical-align: middle;
}

.tabelle-responsive th {
	background:#eee;
	font-weight: bold;
}

Und hier ist noch Code für kleineren Größen (ab 480px und kleiner):

@media only screen and (max-width: 480px) {
    /* responsive Tabelle anpassen */
    .tabelle-responsive table, tr, td {
        padding:0;
        border:1px solid black;
    }
    .tabelle-responsive table {
            border:none;
    }
    .tabelle-responsive thead {
            display:none;
    }
    .tabelle-responsive tr {
            float: left;
            width: 100%;
            margin-bottom: 2em;
    }
    .tabelle-responsive td {
            float: left;
            width: 80%;
            padding:1em;
    }
    .tabelle-responsive td::before {
            content:attr(data-label);
            background: #eee;
            border-right:2px solid black;
            width: 36%;
            float:left;
            padding:1em;
            font-weight: bold;
            margin:-1em 1em -1em -1em;
    }
}

 

2. Responsive Tabellen mit CSS und „Spezial-Code“

Das gewünschte Ergebnis:

Deutschland
Berlin
Deutsch
Dänemark
Kopenhagen
Dänisch
Türkei
Istanbul
Türkisch

Der HTML Code zum Kopieren:

<div class="table">
<div class="table-row">
<div class="table-cell thead">Deutschland</div>
<div class="table-cell">Berlin</div>
<div class="table-cell">Deutsch</div>
</div>
<div class="table-row">
<div class="table-cell thead">Dänemark</div>
<div class="table-cell">Kopenhagen</div>
<div class="table-cell">Dänisch</div>
</div>
<div class="table-row">
<div class="table-cell thead">Türkei</div>
<div class="table-cell">Istanbul</div>
<div class="table-cell">Türkisch</div>
</div>
</div>

der dazugehörige CSS Code für die Desktop Ansicht:

.table {
	display: table;
	border-collapse:collapse;
	width: 100%;
        border: none !important;
}

.table-row {
	display: table-row;
}

.table-cell {
	display: table-cell;
	border: 1px solid silver;
	padding: 15px;
        vertical-align: middle;
}

.thead {
	font-weight: bold;
	background:#eee;
}

und dieser Code hier ist für die mobile Ansicht:

@media only screen and (max-width: 480px) {
 
    .table {border:none;}
    .table-row {
        display: block;
        border-bottom: 1px solid silver;
    }
    .table-cell {
        display: block;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: silver silver -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px medium;
        display: block;
    }
    .table-row { margin-bottom: 20px; }
}

Falls am Ende noch ein zusätzliches mysteriöses Feld auftaucht könnt ihr diesen Code verwenden um es auszublenden:

/* gegen den Bug */
p::before {display:none;}

Quellen:
http://www.smashingmagazine.com/2008/08/top-10-css-table-designs/5/
http://blog.kulturbanause.de/2012/06/tabellen-im-responsive-webdesign/
http://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp

Pin It on Pinterest

Share This