php 表格自动适应页面,h5纯css实现表格的自适应布局

“自适应布局”的特点是使用CSS媒体查询语句(@media screen and (...) )，让网页布局可以根据页面宽度自动做相应的调整，而不是原有网页制作，几种不同的尺寸就做几个相适应的页面。

自适应布局技术中的一个难题，就是，如何让table元素也能表现出自适应性。在HTML5中table是一个不鼓励使用的HTML标记，但网页制作中，我们避免不了的偶尔会用到它。

那么，怎样让一个传统的表格也表现出自适应性呢？

网站网址主题评价

this is a testI love ff网页设计、网页制作★★★★★love ffthis is a test手机教程、手机推荐★★★★★

伪元素 :before 和 :after 它们有一个功能是将元素属性值显示到HTML内容里，content: attr(data-label)，放在before/after伪元素类里。我们就能够让table在PC端表现成网格效果，而在小屏的手机端表现成流式布局。

我们以600px为小屏幕大屏幕的分界点，下面的CSS使用媒体查询语句，在小于600px宽的屏幕上，用CSS将td上的属性值取出来，放到内容区显示。

@media screen and (max-width: 600px) {

table td:before {

content: attr(data-label);

float: left;

text-transform: uppercase;

font-weight: bold;

}

纯CSS实现自适应布局表格

演示：纯CSS实现自适应布局表格

调整页面宽度，或者在不同屏幕尺寸的设备上(PC，手机)尝试浏览器本页，你会发现下面的表格呈现出自适应布局特征，能够自动的使用不同的屏幕尺寸，数据的表现不会因为屏幕大小变化而变得不合适。

网站

网址

主题

评价

网页设计、网页制作

★★★★★

pppppppppppppppppppppppp

ppppppppppppppppp

★★★★★

php 表格自动适应页面,h5纯css实现表格的自适应布局相关推荐

css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo 前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
纯css实现iframe高度自适应
当我们转载文章或者发布文章时经常会需要用iframe标签引入视频或者网页,但是用iframe标签引入视频最大的一个问题就是无法自适应高度,宽度不是什么大问题,只有我们在iframe标签中加入width ...
css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么发布时间:2020-12-05 13:24:07 来源:亿速云阅读:102 作者:小新这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
表格html适应手机端,纯CSS实现响应式表格适应移动端
由于手机屏幕空间有限,太大的表格很难友好显示,本文介绍一种使用纯CSS实现响应式表格的方法,可以比较完美的在手机端显示. 在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每 ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
html 头尾代码自动,HTML Head Generator - 纯 CSS 实现的头部元标签代码生成器 - 钉子の次元...
前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦.没有到用一行 JavaSc ...
纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域
最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...

php 表格自动适应页面,h5纯css实现表格的自适应布局

php 表格自动适应页面,h5纯css实现表格的自适应布局相关推荐

最新文章

热门文章