您可能感兴趣的话题:
CSS
核心提示:这是自适应布局技术中的一个难题,如何让table元素也能表现出自适应性。
以手机、平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死。虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要。这种网页布局就是“自适应布局”(有人喜欢把“Responsive
layout”直译成‘响应式布局’,本人觉得‘自适应布局’更本土化)。这种布局的特点是使用CSS媒体查询语句(@media screen and (...)
),能根据页面宽度,让页面布局自动做相应的调整,而不是采用传统的做法,几种不同的尺寸就做几个相适应的页面。
今天要说的是自适应布局技术中的一个难题,就是,如何让table元素也能表现出自适应性。按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它。那么,怎样让一个传统的表格也表现出自适应性呢?
网上有很多种解决方案,最常见的是配合JavaScript。css-tricks里给出了一个用纯CSS实现的,但它需要将一些业务数据写在CSS里。而本文这将提到的一种方法也是用纯CSS实现表格的自适应布局,而且CSS只负责表现,不牵涉业务逻辑和数据。
查看演示
假设一种需求,用一个表格来展示付款数据。下面是我们使用的表格和数据:
如果觉得《html图片自适应表格 如何用纯CSS实现自适应布局表格》对你有帮助,请点赞、收藏,并留下你的观点哦!