首頁 > 文章 > 後端開發 > 僅使用 CSS 將 HTML 表格轉換為卡片視圖

僅使用 CSS 將 HTML 表格轉換為卡片視圖

DDD原創: 2024-10-26 00:18:28557瀏覽

我想分享一個最近的實驗，探索如何將普通的老式 HTML 表格轉變為動態卡片視圖，超越傳統的行和列。

從簡單的 HTML 表格開始

讓我們從一個簡單的 HTML 表格開始，如下所示。

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

在瀏覽器中渲染時看起來像這樣。

Transform HTML Table into Card View Using Nothing But CSS

只是另一個 html 表格

沒什麼花俏的。

根據定義，表格由行和列組成。如何將傳統的行列佈局轉變為更動態的佈局？

發現 CSS 網格的力量

桌子不必很無聊。透過一些簡單的 CSS 技巧，您可以輕鬆地將傳統的 HTML 表格轉換為時尚的清單或卡片視圖。

最好的部分？沒有 JavaScript，只有純 CSS！

CSS 網格自 2007 年以來一直是 W3C 候選推薦草案，但它已被當前所有主要瀏覽器的最新版本所採用。

CSS 網格專為行和列設計，非常適合表格等複雜佈局。它允許您同時管理水平和垂直對齊，這比 Flexbox 提供更多的控制權，Flexbox 主要是一維的（行或列）。

要使用的 CSS 網格屬性

對和使用 CSS 網格佈局*t* 。

使用 CSS 顯示屬性並將所有設為區塊元素

借助 CSS 網格屬性，我們的純 HTML 表格已神奇地轉換為響應式清單視圖，在單列中整齊地顯示每筆記錄。

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

Transform HTML Table into Card View Using Nothing But CSS

看起來很時髦，但有點混亂！讓我們加入一些 CSS 邊框，為清單中的每一行提供一點喘息空間。

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

給你。看看新外觀！對於沒有一行 JavaScript 魔法建立的清單檢視來說還不錯！

Transform HTML Table into Card View Using Nothing But CSS

現在我們得到了一個由老式 html 表格製成的漂亮列表，我們如何將這個漂亮的列表變成時髦的卡片視圖？

劇透警告：只要再增加幾行 CSS 即可！

將清單轉換為卡片視圖

將表格轉換為卡片的最後一個卡片技巧是使用 CSS 網格屬性 grid-template-columns：

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

grid-template-columns 是 CSS 網格佈局中使用的 CSS 屬性，用於定義網格列的結構。它指定列數、列寬以及網格內空間的劃分方式。

使用repeat()函數，第一個參數讓我們決定想要多少列－假設是4，因為誰不喜歡漂亮的整數呢？第二個參數告訴這些列有多大——1fr，或可用空間的一小部分。這就像給你的專欄一個小小的鼓舞人心的演講：「你們都得到了平等的太空餡餅！」

我們的最終卡片視圖

Transform HTML Table into Card View Using Nothing But CSS

花點時間探索程式碼並在 CodePen 上親自查看結果。它是實驗和嘗試 CSS 網格轉換的完美場所。一路上你甚至可能會發現一些有趣的驚喜。

請記住，CSS 網格也是響應式的，為開發人員提供瞭如何在各種螢幕尺寸和裝置上調整和重排佈局的增強控制。

可選：向卡片視圖新增資料標籤

雖然卡片視圖在視覺上很吸引人，但它缺乏列出資訊的清晰度，讓使用者猜測每張卡片中代表的資料。

透過結合 JavaScript，我們可以無縫地為每一列添加資料標籤，增強標籤與其對應單元格之間的關聯。

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

現在看起來像這樣

Transform HTML Table into Card View Using Nothing But CSS

示範

它與我們開始時的 html 表格完全不同。使用 CSS Grid，佈局選項是無窮無盡的，因為它允許完全控制二維空間中的行和列。

結論

本教學僅觸及冰山表面。您可以輕鬆建立反應速度更快的佈局、重疊元素、跨多行或多列跨項目以及動態調整網格區域，使其具有高度通用性，可滿足各種佈局需求。

網格快樂！

關於作者

作者是一位資深的Web 開發人員，他創建了流行的PHP 資料網格工具(phpgrid.com)，利用CRUD 的力量讓世界變得更美好— 至少對於那些希望簡化生活的開發人員來說是這樣！

以上是僅使用 CSS 將 HTML 表格轉換為卡片視圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript css html define for while using Property number function this alert display transform column table

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：以下是一些基於您的文章的基於問題的標題，強調“為什麼它是空的”方面： * **SimpleXML 和 `print_r()`：為什麼它顯示 XML 元素的空數組？ ** ** **下一篇：以下是一些基於您的文章的基於問題的標題，強調“為什麼它是空的”方面： * **SimpleXML 和 `print_r()`：為什麼它顯示 XML 元素的空數組？ ** ** **

看更多