纯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%的人还看了以下文章

  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    3.7K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    3.3K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.1K0
  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    2.2K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    3.2K0
  • 5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易,有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法,以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    2018年9月23日
    4.0K0

发表回复

登录后才能评论