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.

<table>  
  <thead>  
    <tr>  
      <th>Company</th>  
      <th>Contact</th>  
      <th>Country</th>  
    </tr>  
  </thead>  
  <tbody>  
  <tr>  
    <td>Alfreds Futterkiste</td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro Moctezuma</td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>    
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro  </td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  </tbody>  
</table>

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.

   <table>  
     <thead>  
       <tr>  
         <th>Company</th>  
         <th>Contact</th>  
         <th>Country</th>  
       </tr>  
     </thead>  
     <tbody>  
     <tr>  
       <td>Alfreds Futterkiste</td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro Moctezuma</td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>    
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro  </td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     </tbody>  
   </table>
   

   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!