怎么用纯CSS实现表格响应式布局

布局效果:

怎么用纯CSS实现表格响应式布局

简单解析一下效果:

  • 在屏幕视口较为宽时,表现为一个整体 Table 的样式

  • 而当屏幕视口宽度较小时,原 Table 的每一行数据单独拆分为一个 Table 进行展示

很有意思的一个响应式布局,让信息在小屏幕下得到了一种不错的展示。

那么,仅仅使用 CSS 的话,能否实现这样一个布局呢?答案是可以的

首先,肯定会用到媒体查询,这个不难看出。另外,我们观察下拆分后的每一组数据:

怎么用纯CSS实现表格响应式布局

都会存在一组原本整体一个 Table 时的表头信息,主要的难点就是在这里,我们如何在拆分成一个一个的子 Table 展示时,同时展示这些表头信息?

基本结构的实现

首先,我们先实现常规宽屏下的 HTML 及对应的 CSS。

比较简单,这里没有什么特殊之处,使用 <table> 标签或者使用 div、ul 等标签进行模拟一个表格都可以。

<table>  <caption>Lorem ipsum !</caption>  <thead>    <tr>      <th>Account</th>      <th>Due Date</th>      <th>Amount</th>      <th">Period</th>    </tr>  </thead>  <tbody>    <tr>      <td data-label="Account">Visa - 3412</td>      <td data-label="Due Date">04/01/2016</td>      <td data-label="Amount">$1,190</td>      <td data-label="Period">03/01/2016 - 03/31/2016</td>    </tr>    // ... 重复多组  </tbody></table>

得到这样一个简单的 Table:

怎么用纯CSS实现表格响应式布局

使用媒体查询将单个 Table 拆分成多个

下一步也很简单,设定合适的阈值(视实际业务情况而定),使用媒体查询将单个 Table 拆分成多个子 Table。

@media screen and (max-width: 600px) {  table {    border: 0;  }    table thead {    display: none;  }  table tr {    display: block;    margin-bottom: 10px;  }  table td {    border-bottom: 1px solid #ddd;    display: block;  }}

这里做的事情也非常简单:

  • 利用媒体查询,设定屏幕宽度小于 600px 的样式

  • 去掉原本表格的 <thead> 表头,直接隐藏即可

  • 将原本的一行 <tr>,设置为 display: block, 并且设置一个下边距,使之每一个分开

  • 将原本的一行内的 <td>,设置为 display: block,这样,它们就会竖向排列,使每一个 <tr> 形成新的一个子 table

好,这样,再屏幕宽度小于 600px 时,我们就得到了这样一个 Table:

怎么用纯CSS实现表格响应式布局

借助伪元素及其特性,实现表头信息展示

下面一步,也就是最为关键的一步,我们如何在子 table 的每一行,也就是 <td> 内,再展示原本的表头信息呢?

这里其实也非常简单,只是简单的运用了伪元素,极其可以读取 HTML 标签属性的小特性实现。

我们只需要简单改造一下代码,给每个 <td> 的 HTML,带上与之对应的表头列描述信息:

<table>  // 上方信息保持一致  <tbody>    <tr>      <td data-label="Account">Visa - 3412</td>      <td data-label="Due Date">04/01/2016</td>      <td data-label="Amount">$1,190</td>      <td data-label="Period">03/01/2016 - 03/31/2016</td>    </tr>    <tr>      <td scope="row" data-label="Account">Visa - 6076</td>      <td data-label="Due Date">03/01/2016</td>      <td data-label="Amount">$2,443</td>      <td data-label="Period">02/01/2016 - 02/29/2016</td>    </tr>    // ... 每个 tr 进行同样的处理  </tbody></table>

接着,借助 td 的伪元素,实现表头信息的展示即可:

@media screen and (max-width: 600px) {  // ... 保持一致  table td {    position: relative;    display: block;    text-align: right;  }  table td::before {    position: absolute;    left: 10px;    right: 0;    content: attr(data-label);  }}

这里,我们核心的知识点就是利用了元素的伪元素可以在 content 属性里,读取其 HTML 元素内的属性内容,并进行展示的知识点。

  • 假设一个 HTML 标签定义为: <div data-msg="ABC">

  • 那么该 div 对应的伪类如果设置了 content: attr(data-msg) ,就可以读取到 data-msg 的值,相当于 content:"ABC"

这样,我们在小屏幕下,就得到了这样一种效果:

怎么用纯CSS实现表格响应式布局

完整的效果,即如题图所示:

怎么用纯CSS实现表格响应式布局

感谢各位的阅读,以上就是“怎么用纯CSS实现表格响应式布局”的内容了,经过本文的学习后,相信大家对怎么用纯CSS实现表格响应式布局这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

文章标题:怎么用纯CSS实现表格响应式布局,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/24365

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年9月10日 下午11:57
下一篇 2022年9月10日 下午11:59

相关推荐

  • windows 0xc00000f4蓝屏如何解决

    0xc00000f4蓝屏解决方法: 方法一: 1、一般来说,内存读取错误的情况只要重启一下电脑就可以解决了。 2、如果重启没解决,那么再次重启,然后在开机时按下“F8”进入如下界面。 3、接着选择其中的“安全模式”进入。 4、进入安全模式后,卸载最近一次电脑使用时安装的驱动和软件,再重启电脑即可。 …

    2022年9月15日
    4100
  • windows nvidia驱动如何更新

    nvidia驱动更新方法: 1、首先我们下载一个nvidia GeForce experience软件。 2、下载安装完成后,点击右下角的nvidia图标,打开nvidia GeForce experience。 3、打开后,进入上方的“驱动程序”选项。 4、然后点击“检查更新文件”可以扫描到最新的…

    2022年8月29日
    4900
  • windows 0x80004005错误代码如何解决

    0x80004005错误代码解决方法: 方法一: 1、按下键盘上的“win+r”打开运行。 2、然后在其中输入“regsvr32 softpub.dll”回车确定。 3、弹出修复成功的对话框,点击“确定”。 4、接着再打开运行框,依次输入“regsvr32 wintrust.dll”和“regsvr…

    2022年9月18日
    17000
  • 如何利用深度链接方式后门化Facebook APP

    近期,作者发现了Facebook安卓APP应用的一个深度链接漏洞,利用该漏洞,可以把用户手机上安装的Facebook安卓APP应用转变成后门程序(Backdoor),实现后门化。另外,利用该漏洞还可以重打包Facebook APP,并将其发送给特定目标受害者安装使用。下面就来看看作者对该漏洞的发现过…

    2022年9月10日
    14200
  • 如何进行基于知识图谱的APT组织追踪治理

    高级持续性威胁(APT)正日益成为针对政府和企业重要资产的不可忽视的网络空间重大威胁。由于APT攻击往往具有明确的攻击意图,并且其攻击手段具备极高的隐蔽性和潜伏性,传统的网络检测手段通常无法有效对其进行检测。近年来,APT攻击的检测和防御技术逐渐引起各国政府和网络安全研究者的关注。 一、发达国家AP…

    2022年9月18日
    15600
  • 使用ZoomEye寻找APT攻击的示例分析

    ZoomEye线上的数据是覆盖更新的模式,也就是说第2次扫描如果没有扫描到数据就不会覆盖更新数据,ZoomEye上的数据会保留第1次扫描获取到的banner数据,这个机制在这种恶意攻击溯源里其实有着很好的场景契合点:恶意攻击比如Botnet、APT等攻击使用的下载服务器被发现后一般都是直接停用抛弃,…

    2022年9月2日
    9900
  • 如何进行墨者靶场WebShell文件上传漏洞分析溯源

    1.打开网址后,发现是一个上传页面 2.直接上传后缀名为php的文件,发现无法上传 3.采用BurpSuite进行抓包,将上传的后缀为php的文件的后缀改为php5,即可绕过 4.使用菜刀进行连接,在var/www/html的目录中,发现带有KEY的文件,打开即可看到key 5.打开另一个网址,同时…

    2022年9月22日
    7000
  • WEB开发中常见漏洞防御方法是什么

    SQL注入漏洞 SQL注入漏洞产生原因及危害 在sql查询中很多程序员会将变量拼接入sql语句后再进行查询,这样如果黑客在参数中插入其他sql语句就可能导致我们网站的密码被被黑客查询出来或者被拖取大量数据,如果在开发中使用了字符串拼接进SQL语句就必须进行严格的过滤,任何用户输入的内容都不可信任,以…

    2022年9月26日
    5100
  • React调度的原理是什么

    异步调度 问题:由于对于大型的 React 应用,会存在一次更新,递归遍历大量的虚拟 DOM ,造成占用 js 线程,使得浏览器没有时间去做一些动画效果,伴随项目越来越大,项目会越来越卡。 对比Vue: Vue 有这 template 模版收集依赖的过程,轻松构建响应式,使得在一次更新中,Vue 能…

    2022年9月21日
    7600
  • win7如何清理微信和qq缓存

    win7清理微信和qq缓存的方法 微信清理: 1、打开微信,点击左侧下方三条横杠,打开后点击“设置” 2、 点击“通用设置” 3、点击右侧的“存储空间管理” 4、找到缓存这里,点击对应的管理和清理就可以了。 QQ缓存清理: 1、打开QQ主面板,点击左下方三条杠,点击“设置” 2、点击左边的“文件管理…

    2022年9月24日
    5800
联系我们
关注微信
关注微信
分享本页
返回顶部
PingCode 比 Jira 更好用的研发管理工具。免费试用