我想分享一個(gè)最近的實(shí)驗(yàn)，探索如何將普通的老式 HTML 表格轉(zhuǎn)變?yōu)閯?dòng)態(tài)卡片視圖，超越傳統(tǒng)的行和列。

從簡(jiǎn)單的 HTML 表格開(kāi)始

讓我們從一個(gè)簡(jiǎn)單的 HTML 表格開(kāi)始，如下所示。

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

在瀏覽器中渲染時(shí)看起來(lái)像這樣。

只是另一個(gè) html 表格

沒(méi)什麼花俏的。

根據(jù)定義，表格由行和列組成。如何將傳統(tǒng)的行列佈局轉(zhuǎn)變?yōu)楦鼊?dòng)態(tài)的佈局？

發(fā)現(xiàn) CSS 網(wǎng)格的力量

桌子不必很無(wú)聊。透過(guò)一些簡(jiǎn)單的 CSS 技巧，您可以輕鬆地將傳統(tǒng)的 HTML 表格轉(zhuǎn)換為時(shí)尚的清單或卡片視圖。

最好的部分？沒(méi)有 JavaScript，只有純 CSS！

CSS 網(wǎng)格自 2007 年以來(lái)一直是 W3C 候選推薦草案，但它已被當(dāng)前所有主要瀏覽器的最新版本所採(cǎi)用。

CSS 網(wǎng)格專為行和列設(shè)計(jì)，非常適合表格等複雜佈局。它允許您同時(shí)管理水平和垂直對(duì)齊，這比 Flexbox 提供更多的控制權(quán)，F(xiàn)lexbox 主要是一維的（行或列）。

要使用的 CSS 網(wǎng)格屬性

1. 對(duì) 和 使用 CSS 網(wǎng)格佈局*t* 。
2. 使用 CSS 顯示屬性並將所有 設(shè)為區(qū)塊元素

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

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

   

   看起來(lái)很時(shí)髦，但有點(diǎn)混亂！讓我們加入一些 CSS 邊框，為清單中的每一行提供一點(diǎn)喘息空間。

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

   給你?？纯葱峦庥^！對(duì)於沒(méi)有一行 JavaScript 魔法建立的清單檢視來(lái)說(shuō)還不錯(cuò)！

   

   現(xiàn)在我們得到了一個(gè)由老式 html 表格製成的漂亮列表，我們?nèi)绾螌⑦@個(gè)漂亮的列表變成時(shí)髦的卡片視圖？

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

   將清單轉(zhuǎn)換為卡片視圖

   將表格轉(zhuǎn)換為卡片的最後一個(gè)卡片技巧是使用 CSS 網(wǎng)格屬性 grid-template-columns：

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

   grid-template-columns 是 CSS 網(wǎng)格佈局中使用的 CSS 屬性，用於定義網(wǎng)格列的結(jié)構(gòu)。它指定列數(shù)、列寬以及網(wǎng)格內(nèi)空間的劃分方式。

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

   我們的最終卡片視圖

   

   花點(diǎn)時(shí)間探索程式碼並在 CodePen 上親自查看結(jié)果。它是實(shí)驗(yàn)和嘗試 CSS 網(wǎng)格轉(zhuǎn)換的完美場(chǎng)所。一路上你甚至可能會(huì)發(fā)現(xiàn)一些有趣的驚喜。

   請(qǐng)記住，CSS 網(wǎng)格也是響應(yīng)式的，為開(kāi)發(fā)人員提供瞭如何在各種螢?zāi)怀叽绾脱b置上調(diào)整和重排佈局的增強(qiáng)控制。

   可選：向卡片視圖新增資料標(biāo)籤

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

   透過(guò)結(jié)合 JavaScript，我們可以無(wú)縫地為每一列添加資料標(biāo)籤，增強(qiáng)標(biāo)籤與其對(duì)應(yīng)單元格之間的關(guān)聯(lián)。

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

   現(xiàn)在看起來(lái)像這樣

   

   示範(fàn)

   它與我們開(kāi)始時(shí)的 html 表格完全不同。使用 CSS Grid，佈局選項(xiàng)是無(wú)窮無(wú)盡的，因?yàn)樗试S完全控制二維空間中的行和列。

   結(jié)論

   本教學(xué)僅觸及冰山表面。您可以輕鬆建立反應(yīng)速度更快的佈局、重疊元素、跨多行或多列跨項(xiàng)目以及動(dòng)態(tài)調(diào)整網(wǎng)格區(qū)域，使其具有高度通用性，可滿足各種佈局需求。

   網(wǎng)格快樂(lè)！

   關(guān)於作者

   作者是一位資深的Web 開(kāi)發(fā)人員，他創(chuàng)建了流行的PHP 資料網(wǎng)格工具(phpgrid.com)，利用CRUD 的力量讓世界變得更美好— 至少對(duì)於那些希望簡(jiǎn)化生活的開(kāi)發(fā)人員來(lái)說(shuō)是這樣！

以上是僅使用 CSS 將 HTML 表格轉(zhuǎn)換為卡片視圖的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！