Tabellen responsiv gestalten mit minimalem CSS

Hier ist ein fantastischer CSS-Trick von Bradley Taunt, bei dem er zeigt, wie man Tabellen mit nur *ein wenig* zusätzlichem Code auf Mobilgeräten funktionsfähig macht. Er gestaltet jede Tabellenzeile zu einer Karte um, die etwa so aussieht

Siehe den Pen
Responsive Tables #2.5: Flexbox von Bradley Taunt (@bradleytaunt)
auf CodePen.

(Stellen Sie sicher, dass Sie den Pen öffnen und ihn etwas verkleinern, um zu sehen, wie das Design responsiv funktioniert.)

Bradleys Beispiel-Markup sieht so aus – sauber, barrierefrei, ganz normales HTML

<table>
  <thead>
    <tr>
      <th>Type of Food</th>
      <th>Calories</th>
      <th>Tasty Factor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>Type of Food</span> Slice of Pizza</td>
      <td><span>Calories</span> 450</td>
      <td><span>Tasty Factor</span> 95%</td>
    </tr>
  </tbody>
</table>

Wie macht er diesen Karteneffekt? Er verwendet Flexbox auf kleineren Bildschirmen und lässt die span-Elemente sich offenbaren.

Jedoch! Ich bin kein großer Fan von diesen Spans. Sie sind auf größeren Bildschirmgrößen versteckt, aber das Markup ist immer noch da, daher fühlt es sich für mich nicht besonders sauber an. Ich habe vor einiger Zeit an einem Projekt gearbeitet, bei dem wir auf dasselbe Problem gestoßen sind. Wir beschlossen stattdessen, data-Attribute für jede td zu verwenden, wie hier

<table>
  <thead>
    <tr>
      <th>Type of Food</th>
      <th>Calories</th>
      <th>Tasty Factor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Type of Food">Slice of Pizza</td>
      <td data-title="Calories">450</td>
      <td data-title="Tasty Factor">95%</td>
    </tr>
  </tbody>
</table>

Dann können wir dieses data-Attribut in unseren Stilen abrufen und es auf der Seite in einem Pseudoelement rendern

td:before {
  content: attr(data-title);
}

Von dort aus positionieren wir das Pseudoelement absolut an der Seite und zeigen es nur auf kleineren Bildschirmen mit einer Media Query an. Ich bin mir über die Auswirkungen auf die Barrierefreiheit nicht sicher, aber meiner Meinung nach ist es etwas einfacher zu lesen und zu verstehen.

So oder so, ich denke, dieser Beitrag ist eine großartige Erinnerung an all die kniffligen Probleme, die auftreten, sobald man anfängt, Tabellen zu verwenden. Es gibt so viele Möglichkeiten, Dinge responsiv zu handhaben, und diese Entscheidungen sollten vollständig auf dem Kontext des Designs basieren.

Responsiv gestaltete Tabellen…

Wenn Sie Daten Spalte für Spalte vergleichen müssen, ist es wahrscheinlich am besten, die Tabellenstruktur weitgehend unangetastet zu lassen und Scrollen zu ermöglichen.

Wenn jede Zeile zerlegt werden kann und dennoch nützlich ist, ist das Zusammenklappen, um Scrollen zu vermeiden, gut.https://#/zeMFdrwU1M pic.twitter.com/3z8hQDvNAZ

— CSS-Tricks (@css) 11. Oktober 2019

Direkter Link →