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.

<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!