纯CSS实现表格的自适应布局

本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

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

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

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

本文分享的是用纯CSS实现表格的自适应布局,而且CSS只负责表现,不牵涉业务逻辑和数据。

网页table代码:

<table>
<thead>
<tr>
<th>网站</th>
<th>网址</th>
<th>主题</th>
<th>评价</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="网站"><a href="http://www.125jz.com">中国网页设计</a></td>
<td data-label="网址">http://www.125jz.com</td>
<td data-label="主题">网页设计、网页制作</td>
<td data-label="评价">★★★★★</td>
</tr>
<tr>
<td data-label="网站">手机521</td>
<td data-label="网址">http://www.mobile521.com</td>
<td data-label="主题">手机教程、手机推荐</td>
<td data-label="评价">★★★★★</td>
</tr>
</tbody>
</table>

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

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

实现表格自适应的CSS代码:

@media screen and (max-width: 600px) {
   table td:before {
     content: attr(data-label);
     float: left;
     text-transform: uppercase;
     font-weight: bold;
   }
}

 

效果如下:

纯CSS实现表格的自适应布局
在大屏上显示效果
纯CSS实现表格的自适应布局
在小于600PX屏幕上显示效果

全部代码:

 

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

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

网站 网址 主题 评价
中国网页设计 http://www.125jz.com 网页设计、网页制作 ★★★★★
手机521 http://www.mobile521.com 手机教程、手机推荐 ★★★★★

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1324.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月19日 上午9:14
下一篇 2018年2月20日 下午12:14

99%的人还看了以下文章

  • 美观简洁的bootstrap 表单验证代码

    美观简洁的bootstrap 表单验证代码,如上图所示,点击登录按钮,在输入框下方显示错误提示信息 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>ipput</title> <!– 新 Bootstra…

    2020年2月9日
    4.0K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    4.9K1
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    10.3K0
  • Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    1.6K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    3.0K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.6K0

发表回复

登录后才能评论