Verwandeln Sie eine HTML-Tabelle mit nur CSS in eine Kartenansicht

Ich möchte ein aktuelles Experiment vorstellen, bei dem untersucht wird, wie eine einfache, altmodische HTML-Tabelle in eine dynamische Kartenansicht umgewandelt werden kann, die über die herkömmlichen Zeilen und Spalten hinausgeht.

Beginnen Sie mit einer einfachen HTML-Tabelle

Beginnen wir mit einer einfachen HTML-Tabelle wie der folgenden.

f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08

Beim Rendern im Browser sieht es so aus.

Nur ​​eine weitere HTML-Tabelle

Nichts Besonderes.

Tabellen bestehen per Definition aus Zeilen und Spalten. Wie können wir das traditionelle Zeilen- und Spaltenlayout in etwas Dynamischeres umwandeln?

Entdecken Sie die Leistungsfähigkeit von CSS Grid

Tische müssen nicht langweilig sein. Mit ein paar einfachen CSS-Tricks können Sie eine herkömmliche HTML-Tabelle ganz einfach in eine elegante Listen- oder Kartenansicht umwandeln.

Das Beste daran? Kein JavaScript, nur reines CSS!

CSS Grid ist seit 2007 ein W3C Candidate Recommendation Draft, wurde jedoch von den neuesten Versionen aller aktuellen gängigen Browser übernommen.

Das CSS-Raster ist sowohl für Zeilen als auch für Spalten konzipiert und eignet sich daher ideal für komplexe Layouts wie Tabellen. Sie können damit sowohl horizontale als auch vertikale Ausrichtungen gleichzeitig verwalten, was Ihnen viel mehr Kontrolle gibt als Flexbox, das hauptsächlich eindimensional (Zeile oder Spalte) ist.

Zu verwendende CSS-Rastereigenschaften

1. Verwenden Sie CSS-Rasterlayout*t* für und .
2. Verwenden Sie die CSS-Anzeigeeigenschaft und legen Sie alle als Blockelemente fest

   Mit CSS-Rastereigenschaften verwandelt sich unsere einfache HTML-Tabelle bereits auf magische Weise in eine reaktionsfähige Listenansicht, in der jeder Datensatz übersichtlich in einer einzelnen Spalte angezeigt wird.

   table tbody, table thead {  
     display: grid;  
   }  
   table td {  
     display: block;  
   }
   

   

   Es sieht schick aus, aber ein bisschen chaotisch! Lassen Sie uns ein paar CSS-Ränder hinzufügen, um jeder Zeile in unserer Liste etwas Luft zum Atmen zu geben.

   table, th, tr {  
     border: 1px solid black;  
   }
   

   Los geht's. Schauen Sie sich den neuen Look an! Nicht schlecht für eine Listenansicht, die ohne eine einzige Zeile JavaScript-Magie erstellt wurde!

   

   Jetzt haben wir eine schöne Liste, die aus einer altmodischen HTML-Tabelle erstellt wurde. Wie verwandeln wir diese schöne Liste in eine schicke Kartenansicht?

   Spoiler-Alarm: Fügen Sie einfach noch ein paar Zeilen CSS hinzu!

   Liste in Kartenansicht umwandeln

   Unser letzter Kartentrick, um Tabellen in Karten umzuwandeln, besteht darin, die CSS-Grid-Eigenschaft „grid-template-columns“ zu verwenden:

   table tbody {  
     display: grid;  
     grid-template-columns: repeat(4, 1fr);  
   }
   

   grid-template-columns ist eine CSS-Eigenschaft, die im CSS-Grid-Layout verwendet wird, um die Struktur der Rasterspalten zu definieren. Es gibt die Anzahl der Spalten, ihre Breite und die Aufteilung des Raums innerhalb des Rasters an.

   Mit der Funktion „repeat()“ lässt uns der erste Parameter entscheiden, wie viele Spalten wir wollen – sagen wir 4, denn wer liebt nicht eine schöne runde Zahl? Der zweite Parameter gibt an, wie groß diese Spalten sein sollen – 1 Fr oder ein Bruchteil des verfügbaren Speicherplatzes. Es ist so, als würde man seinen Kolumnen eine kleine Aufmunterung geben: „Ihr kriegt alle das gleiche Stück vom Weltraumkuchen ab!“

   Unsere letzte Kartenansicht

   

   Nehmen Sie sich einen Moment Zeit, um den Code zu erkunden und sich selbst die Ergebnisse auf CodePen anzusehen. Es ist der perfekte Ort, um mit CSS-Rastertransformationen zu experimentieren und herumzuspielen. Vielleicht entdecken Sie unterwegs sogar einige lustige Überraschungen.

   Denken Sie daran, dass CSS Grid auch responsiv ist und Entwicklern so eine bessere Kontrolle darüber bietet, wie Layouts auf verschiedenen Bildschirmgrößen und Geräten angepasst und umgestaltet werden.

   Optional: Datenbeschriftung zur Kartenansicht hinzufügen

   Obwohl die Kartenansicht optisch ansprechend ist, mangelt es ihr an der Klarheit der Spalteninformationen, sodass Benutzer die in jeder Karte dargestellten Daten erraten können.

   Durch die Integration eines Hauchs von JavaScript können wir nahtlos Datenbeschriftungen für jede Spalte hinzufügen und so die Verknüpfung zwischen den Beschriftungen und den entsprechenden Zellen verbessern.

   f5d188ed2c074f8b944552db028f98a1  
     ae20bdd317918ca68efdc799512a9b39  
       a34de1251f0d9fe1e645927f19a896e8  
         b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
         b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
         b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
       fd273fcf5bcad3dfdad3c41bd81ad3e5  
     7943277d65306330563feb42dc8c705a  
     92cee25da80fac49f6fb6eec5fd2c22a  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5    
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     ca745a59da05f784b8811374296574e1  
   f16b1740fad44fb09bfe928bcc527e08
   

   Jetzt sieht es so aus

   

   Demo

   Es ist nichts anderes als die HTML-Tabelle, mit der wir angefangen haben. Mit CSS Grid sind die Layoutoptionen endlos, da es die vollständige Kontrolle über Zeilen und Spalten in einem zweidimensionalen Raum ermöglicht.

   Fazit

   Dieses Tutorial kratzt nur an der Oberfläche des Eisbergs. Sie können problemlos reaktionsfähigere Layouts erstellen, Elemente überlappen, Elemente über mehrere Zeilen oder Spalten verteilen und Rasterbereiche dynamisch anpassen, wodurch es äußerst vielseitig für verschiedene Layoutanforderungen ist.

   Viel Spaß beim Gridding!

   Über den Autor

   Der Autor ist ein erfahrener Webentwickler, der das beliebte PHP-Datagrid-Tool (phpgrid.com) entwickelt hat und die Leistungsfähigkeit von CRUD nutzt, um die Welt zu einem besseren Ort zu machen – zumindest für Entwickler, die ihr Leben vereinfachen möchten!

Das obige ist der detaillierte Inhalt vonVerwandeln Sie eine HTML-Tabelle mit nur CSS in eine Kartenansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!