首页 > 文章 > 后端开发 > 仅使用 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

上一篇：Here are a few question-based titles based on your article, playing up the \"why is it empty\" aspect: * **SimpleXML and `print_r()`: Why Does It Show an Empty Array for XML Elements?** * *下一篇：How to Group 2D Array Rows by a Single Column and Aggregate Another Column in PHP?

查看更多