Ich habe das erste Mal im Jahr 2011 über responsive Datentabellen geschrieben. Als Responsive Webdesign gerade aufkam, gab es kleine Hürden wie Datentabellen, die übersprungen werden mussten. Die Natur von <table> Elementen ist, dass sie eine Mindestbreite haben, die vom Inhalt abhängt, den sie enthalten, und diese kann leicht die Breite eines kleinen Bildschirms überschreiten.
Dieses Bild, das ich damals erstellt habe, deckt das Problem immer noch ziemlich gut ab
Außer… vielleicht sind sie nicht *gleich* schlecht. Wenn das Bild auf der linken Seite scrollbar wäre, dann wäre es vielleicht gar nicht so schlecht. Tatsächlich ist das, was ich kürzlich hier auf CSS-Tricks gemacht habe. Ich halte es für die sicherste Methode, responsive Tabellen zu handhaben, *wenn Sie keine Ahnung haben, welchen Inhalt die Tabelle enthält.* Das ist hier der Fall, wo ich Basis-Tabellenstile festlegen muss, die für jeden Blogbeitrag gelten, der eine Tabelle enthalten könnte.
Der Kern der Idee einer scrollbaren Tabelle ist, sie in ein <div> zu verpacken, das overflow: auto; hat. Dadurch ist die <table> darin frei, die Breite des Elternelements zu überschreiten, aber sie wird die Breite nicht „aufblähen“ und stattdessen eine Scrollleiste auslösen. Das reicht aber noch nicht ganz, also hier ist Adrian Roselli mit den wahren Details. Das umgebende <div> muss fokussierbar und beschriftet sein, also
<div role="region" aria-labelledby="Caption01" tabindex="0">
<table>
<caption id="Caption01">Appropriate caption</caption>
<!-- ... -->
</table>
</div>Wenden Sie dann die Scroll- und Fokusstile an, unter der Bedingung, dass Sie alles andere richtig gemacht haben
[role="region"][aria-labelledby][tabindex] {
overflow: auto;
}
[role="region"][aria-labelledby][tabindex]:focus {
outline: .1em solid rgba(0,0,0,.1);
}Wenn Sie responsive Tabellen weiterentwickeln wollen, gibt es alle möglichen Optionen. Eine der Klassiker ist, viele Elemente auf display: block zu setzen, was bedeutet, dass alle Daten in einer Zeile (<tr>) als ein Stapel von gestapeltem Inhalt zusammengefasst werden, der eine geringere Chance hat, die Breite des Elternelements zu brechen. Sie können alle Datenbeschriftungen mit Pseudo-Elementen richtig darstellen. Aber das macht nur Sinn, wenn einzelne Inhaltszeilen für sich allein Sinn ergeben. Das ist nicht bei jeder Tabelle der Fall. Der Zweck einer Tabelle könnte die Querverweisung von Daten sein, und in diesem Fall haben Sie das mit diesem Ansatz ruiniert. Also wieder, es gibt gute Ansätze für responsive Tabellen, wenn Sie genau den Inhalt und Zweck der Tabelle kennen. Aber die beste responsive Lösung, wenn Sie es *nicht* wissen, ist einfach sicherzustellen, dass sie wischbar sind.
Das ist die Lösung, die ich für die meisten Fälle bevorzuge. Ich denke, der visuelle Hinweis aus dem Originalartikel ist der wichtigste Teil davon. Als ich das vor einiger Zeit implementiert habe, habe ich JavaScript verwendet, um die visuellen Hinweise zu handhaben… Ich denke, ich werde es mit dieser reinen CSS-Methode aktualisieren müssen.
Yep, das ist ziemlich genau dasselbe, was ich auf meiner Website gemacht habe, richtig (und die Tabellen dort müssen definitiv Tabellen bleiben). Solange nur die Tabelle selbst scrollt und nicht die ganze Seite, sollte es in der Praxis in Ordnung sein.
Das größte Problem ist, dass mobile Browser sich weigern, Scrollleisten überhaupt anzuzeigen, wenn Sie nicht schieben, was dazu führte, dass jemand nicht erkannte, dass Tabellen scrollbar sein könnten, weil eine Spaltengrenze direkt an der Seite des Bildschirms ausgerichtet war. Ich habe darüber nachgedacht, Pfeile an den Seiten anzubringen, die nur angezeigt werden, wenn die Tabelle in diese Richtung scrollbar ist, aber bisher kein Glück mit reinem CSS (jeder Versuch bisher scheint an *einem* Problem zu scheitern), und während ich JavaScript erwogen habe, um sie anzuzeigen (natürlich nicht das Scrollen selbst), kam dies auch gerade dann auf, als Google erwog, mobile Chrome-Downloads auf 2G-Verbindungen einzustellen… was kein großes Problem gewesen wäre, außer dass es eine Warnung anzeigt (keine Möglichkeit, Skripte als sicher zum Ablegen zu markieren?) und ich wollte nicht riskieren, dass Leute denken, ich würde im Hintergrund etwas zwielichtiges tun, weil nicht sofort offensichtlich ist, was fehlt.