我想分享一個最近的實驗，探索如何將普通的老式 HTML 表格轉變為動態卡片視圖，超越傳統的行和列。
從簡單的 HTML 表格開始
讓我們從一個簡單的 HTML 表格開始，如下所示。
<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>
登入後複製
登入後複製
在瀏覽器中渲染時看起來像這樣。
只是另一個 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;
}
登入後複製 
看起來很時髦，但有點混亂！讓我們加入一些 CSS 邊框，為清單中的每一行提供一點喘息空間。
table, th, tr {
border: 1px solid black;
}
登入後複製 給你。看看新外觀！對於沒有一行 JavaScript 魔法建立的清單檢視來說還不錯！
現在我們得到了一個由老式 html 表格製成的漂亮列表，我們如何將這個漂亮的列表變成時髦的卡片視圖？
劇透警告：只要再增加幾行 CSS 即可！
將清單轉換為卡片視圖
將表格轉換為卡片的最後一個卡片技巧是使用 CSS 網格屬性 grid-template-columns：
table tbody {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
登入後複製 grid-template-columns 是 CSS 網格佈局中使用的 CSS 屬性，用於定義網格列的結構。它指定列數、列寬以及網格內空間的劃分方式。 使用repeat()函數，第一個參數讓我們決定想要多少列－假設是4，因為誰不喜歡漂亮的整數呢？第二個參數告訴這些列有多大——1fr，或可用空間的一小部分。這就像給你的專欄一個小小的鼓舞人心的演講：「你們都得到了平等的太空餡餅！」
我們的最終卡片視圖
花點時間探索程式碼並在 CodePen 上親自查看結果。它是實驗和嘗試 CSS 網格轉換的完美場所。一路上你甚至可能會發現一些有趣的驚喜。
請記住，CSS 網格也是響應式的，為開發人員提供瞭如何在各種螢幕尺寸和裝置上調整和重排佈局的增強控制。
可選：向卡片視圖新增資料標籤
雖然卡片視圖在視覺上很吸引人，但它缺乏列出資訊的清晰度，讓使用者猜測每張卡片中代表的資料。
透過結合 JavaScript，我們可以無縫地為每一列添加資料標籤，增強標籤與其對應單元格之間的關聯。
<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>
登入後複製 登入後複製 現在看起來像這樣
示範
它與我們開始時的 html 表格完全不同。使用 CSS Grid，佈局選項是無窮無盡的，因為它允許完全控制二維空間中的行和列。
結論
本教學僅觸及冰山表面。您可以輕鬆建立反應速度更快的佈局、重疊元素、跨多行或多列跨項目以及動態調整網格區域，使其具有高度通用性，可滿足各種佈局需求。
網格快樂！
關於作者
作者是一位資深的Web 開發人員，他創建了流行的PHP 資料網格工具(phpgrid.com)，利用CRUD 的力量讓世界變得更美好— 至少對於那些希望簡化生活的開發人員來說是這樣！
|
以上是僅使用 CSS 將 HTML 表格轉換為卡片視圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
