我想分享一個(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)前所有主要瀏覽器的最新版本所采用。

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

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

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

   借助 CSS 網(wǎng)格屬性，我們的純 HTML 表格已經(jīng)神奇地轉(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 魔法創(chuàng)建的列表視圖來(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，或可用空間的一小部分。這就像給你的專(zhuān)欄一個(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ā)人員提供了對(duì)如何在各種屏幕尺寸和設(shè)備上調(diào)整和重排布局的增強(qiáng)控制。

   可選：向卡片視圖添加數(shù)據(jù)標(biāo)簽

   雖然卡片視圖在視覺(jué)上很吸引人，但它缺乏列信息的清晰度，讓用戶猜測(cè)每張卡片中代表的數(shù)據(jù)。

   通過(guò)結(jié)合 JavaScript，我們可以無(wú)縫地為每一列添加數(shù)據(jù)標(biāo)簽，增強(qiáng)標(biāo)簽與其相應(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)像這樣

   

   演示

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

   結(jié)論

   本教程僅觸及冰山表面。您可以輕松創(chuàng)建響應(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 數(shù)據(jù)網(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)文章！