Tabellen auf Webseiten für mobile Darstellung

Um komplexe Inhalte übersichtlich darzustellen, sind Tabellen eigentlich eine gute Wahl. Doch auf kleinen Displays geht diese Übersichtlichkeit rasch verloren. Entweder ist nur ein Teil der Tabelle zu sehen, oder die Darstellung ist so klein, dass die Schrift nicht mehr lesbar ist. 

Geht man beim Erstellen der Inhalte wie beim modernen Webdesign von dem Grundsatz "mobile first" aus, sollte man Tabellen ganz vermeiden. Viele Inhalte lassen sich auch mit Listen oder aufklappbaren Elementen (sog. Akkordeons) ohne Tabelle übersichtlich darstellen. 

Wenn man in der Desktop-Ansicht  nicht auf die Tabelle verzichten möchte, gibt es mehrere Möglichkeiten:

  

1. Die Tabelle in einen scrollbaren Bereich einbauen.

So kann sichergestellt werden, dass die gesamte Tabelle eingesehen werden kann und keine Inhalte außerhalb des sichtbaren Bereichs liegen. 

 

<div class="table-scroll">
  <table>...</table>
</div> 

 

Die Klasse table-scroll wird dann mit den entsprechenden Eigenschaften versehen:

 

<style>
  .table-scroll {width: 100%;padding: 0px;margin-bottom: 0px;overflow-x: auto;}
</style>

 

Wichtig ist dabei, dass für den Besucher erkennbar ist, dass er hier auf einem Bereich innerhalb der Seite scrollen kann.

Beispiel:

  

2. Die Tabelle in einen scrollbaren Bereich einbauen, dabei aber einzelne Zeilen oder Spalten fixieren.

Um etwa die Überschriften der Spalten beim Scrollen weiterhin sichtbar zu machen, können die Spalten mit den Überschriften beim Scrollen mitwandern. Insbesondere bei großen Tabellen ist es so einfacher, die Werte in der Tabellenzelle zu interpretieren.

 

<style>
  .table-scroll-fix {max-width: 100%;overflow:hidden;position:relative;}
  .table-scroll {width: 100%;padding: 0px;left:0;margin-left: -1px;margin-bottom: 0px;overflow-x: auto;}
  .table-scroll-fix td:nth-child(2) {padding-left: 150px;}
  .table-scroll-fix td:first-child {position: absolute;background:#0D2E57;width: 150px;border-left: 1px solid #fff;border-top-width: 1px;}
</style>
<div class="table-scroll-fix">
  <div class="table-scroll">
  <table>...</table>
</div>
</div>

 

Beispiel:

  

3. Einzelne Spalten / Zeilen ausblendbar machen

Wie in Tabellenkalkulationsprogrammen kann man es mit Hilfe von jquery dem Besucher ermöglichen, einzelne Spalten oder Zeilen nach Bedarf ein- und ausblenden. So kann sich der Benutzer einen Überblick verschaffen, und gezielt weitere Informationen einblenden.

 

<script>
$('.ausblenden').html('<a href="" title="Spalte ausblenden" class="aus">-</a>'); 
$('.ausblenden').closest('table').after('<a class="all">Alle Spalten einblenden</a>');
$('.all').hide();

$('.aus').click(function(e){
  e.preventDefault();
  var btn = $(this);
  var cell = btn.closest('th,td')
  var table = btn.closest('table')
  var cellIndex = cell[0].cellIndex + 1;
  table.find('tr').children(':nth-child('+cellIndex+')').hide();
  table.next().show();
});

$('.all').click(function(e) {
    e.preventDefault();
    var $table = $(this).prev()
    $(this).hide()
    $table.find('th, td').show()
})
</script>
<style>
  .ausblenden a, .einblenden a{text-decoration:none;display:inline-block;border:1px solid #fff;width:1rem;height:1rem;border-radius:.5rem;font-size:1rem;line-height:.85rem;text-align:center;}
</style>
<div class="table-scroll">
<table>
    <tr><td class="ausblenden"></td><td class="ausblenden"></td><td class="ausblenden"></td><td class="ausblenden"></td><td class="ausblenden"></td><td class="ausblenden"></td><td class="ausblenden"></td></tr>
    <tr><td>Überschrift 1</td><td>Überschrift 2</td><td>Überschrift 3</td><td>Überschrift 4</td><td>Überschrift 5</td><td>Überschrift 6</td><td>Überschrift 7</td></tr>
    <tr><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td></tr>
    <tr><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td></tr>
    <tr><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td><td>Inhalt</td></tr>
</table>
</div>

 

Beispiel:

<script>
$( '.table-mobil th' ).each(function() {
  var header = $( this );
  var label = $(this).text();
  var cell = header.closest('th,td')
  var table = header.closest('table')
  var cellIndex = cell[0].cellIndex + 1;
  table.find('tr')
        .children(':nth-child('+cellIndex+')')
        .attr('data-label', label );;
});
</script>
<style>
  @media screen and (max-width: 600px) {
    .table-mobil th{display:none;}
    .table-mobil table{border:0px;}
    .table-mobil td{display:block;}
    .table-mobil td:before{content: attr(data-label) ": ";}
  }
</style>

<div class="table-mobil">
  <table>
    <tr><th>Objekt</th>...</tr>
    <tr><td>Inhalt</td>
  ...
  </table>
</div>

 

  

Es kann neben der Tabelle der Inhalt natürlich auch in einer alternativen Darstellung für die Webseite ausgegeben werden. Bei Extensions kann dies über das Template geschehen, bei normalen Contentelementen ist das möglich, indem bestimmte Contentelemente nur für die mobile Darstellung und andere nur für die Darstellung auf dem Desktop sichtbar gemacht werden.

 

Welche Version auch im Einzelfall gewählt wird: Wichtig ist, dass der Besucher die gesamten Informationen bequem über die Webseite abrufen kann!