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 eine responsive Tabellen ziemlich einfach anlegt um die genannten Punkte zu vermeiden.

Responsive Tabellen mit CSS

Das gewünschte Ergebnis:

Leistung Preis Infolink
Facebook Fan-Page 249.- Mehr Infos
Facebook Gruppe – Betreuung 149.- Mehr Infos
Facebook Betreuung ab 199.- / Monat Mehr Infos

Der HTML Code für genau diese responsive Tabelle jedoch ohne die eingebundenen Links ist:


<div class="g2g-respo-table">
<table>
<thead>
<tr>
<th>Leistung</th>
<th>Preis</th>
<th>Infolink</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Leistung">Facebook Fan-Page - Basic</td>
<td data-label="Preis">249.- </td>
<td data-label="Infolink"><ta href="/leistungen/social-media-marketing/facebook" target="_blank">Mehr Infos</a></td>
</tr>
<tr>
<td data-label="Leistung">Facebook Gruppe - Betreuung</td>
<td data-label="Preis">149.-</td>
<td data-label="Infolink"><ta href="/" target="_blank">Mehr Infos</a></td>
</tr>
<tr>
<td data-label="Leistung">Facebook Betreuung</td>
<td data-label="Infolink"><ta href="/" target="_blank">Mehr Infos</a></td>
</tr>
</tbody>
</table>
</div>

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

.g2g-respo-table {display: block;}

.g2g-respo-table * {
box-sizing:border-box;
}
.g2g-respo-table table {
width:100%;
}

.g2g-respo-table table,
.g2g-respo-table td,
.g2g-respo-table tr,
.g2g-respo-table th {
border:2px solid black;
border-collapse: collapse;
text-align: left;
}

.g2g-respo-table td,
.g2g-respo-table tr,
.g2g-respo-table th {
padding:1em;
}

.g2g-respo-table th {
background:#eee;
font-weight: bold;
}

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

.g2g-respo-table tr {
border-bottom: none;
}

.g2g-respo-table td {
padding:0;
border:1px solid black;
}

.g2g-respo-table table {
border:none;
}

.g2g-respo-table thead {
display:none;
}

.g2g-respo-table tr {
float: left;
width: 100%;
margin-bottom: 2em;
}

.g2g-respo-table td {
float: left;
width: 100%;
padding:1em !important;
border-left: 1px;
border-right: 1px;
}

.g2g-respo-table td::before {
content:attr(data-label);
word-wrap: break-word;
background: #eee;
border-right: 1px solid black;
width: 20%;
float:left;
padding:1em;
font-weight: bold;
margin:-1em 1em -1em -1em;
}
}


 

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

great2gether Digital Agentur mit Spezialisierung auf Shopware & Marketing Automatisierung. Anonym hat 4,93 von 5 Sternen 45 Bewertungen auf ProvenExpert.com