Ubah Jadual HTML kepada Paparan Kad Menggunakan Tiada Tapi CSS

Saya ingin berkongsi percubaan baru-baru ini yang meneroka cara mengubah jadual HTML biasa dan lama kepada paparan kad dinamik, melangkaui baris dan lajur tradisional.

Mulakan Dengan Jadual HTML Mudah

Mari kita mulakan dengan jadual HTML ringkas seperti berikut.

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

Nampaknya begini apabila dipaparkan dalam penyemak imbas.

Hanya satu lagi jadual html

Tiada yang mewah.

Mengikut takrifan, jadual terdiri daripada baris dan lajur. Bagaimanakah kita boleh mengubah reka letak baris dan lajur tradisional kepada sesuatu yang lebih dinamik?

Temui Kuasa Grid CSS

Meja tidak perlu membosankan. Dengan beberapa helah CSS yang mudah, anda boleh mengubah jadual HTML tradisional menjadi paparan senarai atau kad yang kemas.

Bahagian terbaik? Tiada JavaScript, hanya CSS tulen!

Grid CSS telah menjadi Draf Pengesyoran Calon W3C sejak 2007, namun, ia telah diterima pakai oleh versi terkini semua penyemak imbas utama semasa.

Grid CSS direka bentuk untuk kedua-dua baris dan lajur, menjadikannya sesuai untuk reka letak yang kompleks seperti jadual. Ia membolehkan anda mengurus kedua-dua penjajaran mendatar dan menegak secara serentak, yang memberikan anda lebih banyak kawalan daripada Flexbox, yang terutamanya satu dimensi (baris atau lajur).

Ciri Grid CSS untuk Digunakan

1. Gunakan CSS grid layout*t* untuk dan .
2. Gunakan sifat paparan CSS dan tetapkan semua menjadi elemen blok

   Dengan sifat grid CSS, jadual HTML biasa kami telah bertukar secara ajaib menjadi paparan senarai responsif, memaparkan setiap rekod dengan kemas dalam satu lajur.

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

   

   Ia kelihatan menyelerakan tetapi agak huru-hara! Mari taburkan pada beberapa jidar CSS untuk memberi setiap baris dalam senarai kami sedikit ruang bernafas.

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

   Itulah. Lihat wajah baharu! Tidak terlalu lusuh untuk paparan senarai yang dibuat tanpa satu baris sihir JavaScript!

   

   Sekarang kami mendapat senarai bagus yang dibuat daripada jadual html lama, bagaimanakah kita menukar senarai bagus itu kepada paparan kad yang menarik?

   Amaran spoiler: hanya taburkan pada beberapa baris CSS lagi!

   Ubah Senarai kepada Paparan Kad

   Helah kad terakhir kami untuk mengubah jadual menjadi kad ialah menggunakan lajur grid-template-sifat grid CSS:

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

   grid-template-columns ialah sifat CSS yang digunakan dalam reka letak Grid CSS untuk mentakrifkan struktur lajur grid. Ia menentukan bilangan lajur, lebarnya dan cara ruang dalam grid dibahagikan.

   Dengan fungsi repeat(), parameter pertama membolehkan kami menentukan bilangan lajur yang kami mahu—katakan 4, kerana siapa yang tidak suka nombor bulat yang bagus? Parameter kedua memberitahu lajur tersebut betapa besarnya—1fr, atau satu pecahan ruang yang tersedia. Ia seperti memberi sedikit semangat pada lajur anda: 'Anda semua mendapat kepingan pai angkasa yang sama!'

   Paparan kad terakhir kami

   

   Luangkan sedikit masa untuk meneroka kod dan lihat sendiri hasilnya di CodePen. Ia adalah tempat yang sesuai untuk mencuba dan bermain-main dengan transformasi grid CSS. Anda juga mungkin menemui beberapa kejutan yang menyeronokkan sepanjang perjalanan.

   Perlu diingat bahawa Grid CSS juga responsif, memberikan pembangun kawalan yang dipertingkatkan ke atas cara reka letak melaras dan mengalir semula merentas pelbagai saiz dan peranti skrin.

   Pilihan: Menambah label data pada paparan kad

   Walaupun paparan kad menarik secara visual, ia tidak mempunyai kejelasan maklumat lajur, menyebabkan pengguna meneka data yang diwakili dalam setiap kad.

   Dengan menggabungkan sentuhan JavaScript, kami boleh menambahkan label data untuk setiap lajur dengan lancar, meningkatkan perkaitan antara label dan sel yang sepadan dengannya.

   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
   

   Kini kelihatan seperti ini

   

   Demo

   Ia tidak seperti jadual html yang kami mulakan. Dengan Grid CSS, pilihan reka letak tidak berkesudahan kerana ia membenarkan kawalan penuh ke atas kedua-dua baris dan lajur dalam ruang dua dimensi.

   Kesimpulan

   Tutorial ini hanya mencalarkan permukaan gunung ais. Anda boleh dengan mudah membuat reka letak yang lebih responsif, elemen bertindih, rentang item merentas berbilang baris atau lajur dan melaraskan kawasan grid secara dinamik, menjadikannya sangat serba boleh untuk pelbagai keperluan reka letak.

   Selamat menjaring!

   Mengenai Pengarang

   Pengarang ialah pembangun web veteran yang mencipta alat datagrid PHP (phpgrid.com) yang popular, menggunakan kuasa CRUD untuk menjadikan dunia tempat yang lebih baik — sekurang-kurangnya untuk pembangun yang ingin memudahkan kehidupan mereka!

Atas ialah kandungan terperinci Ubah Jadual HTML kepada Paparan Kad Menggunakan Tiada Tapi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!