仅使用 CSS 将 HTML 表格转换为卡片视图

我想分享一个最近的实验，探索如何将普通的老式 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 网格属性

1. 对 和 使用 CSS 网格布局*t* 。
2. 使用 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中文网其他相关文章！