您的位置: 首页 > 软件教程 > DIV+CSS教程专题 > 如何用纯CSS实现自适应布局表格

如何用纯CSS实现自适应布局表格

7.0分
出处:WEB骇客 时间:2017-02-17

您可能感兴趣的话题: CSS  

核心提示:这是自适应布局技术中的一个难题,如何让table元素也能表现出自适应性。

  以手机、平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死。虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要。这种网页布局就是“自适应布局”(有人喜欢把“Responsive layout”直译成‘响应式布局’,本人觉得‘自适应布局’更本土化)。这种布局的特点是使用CSS媒体查询语句(@media screen and (...) ),能根据页面宽度,让页面布局自动做相应的调整,而不是采用传统的做法,几种不同的尺寸就做几个相适应的页面。

  今天要说的是自适应布局技术中的一个难题,就是,如何让table元素也能表现出自适应性。按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它。那么,怎样让一个传统的表格也表现出自适应性呢?

  网上有很多种解决方案,最常见的是配合JavaScript。css-tricks里给出了一个用纯CSS实现的,但它需要将一些业务数据写在CSS里。而本文这将提到的一种方法也是用纯CSS实现表格的自适应布局,而且CSS只负责表现,不牵涉业务逻辑和数据。

  查看演示

  假设一种需求,用一个表格来展示付款数据。下面是我们使用的表格和数据:

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
01