“自适应布局”的特点是使用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实现自适应布局表格
调整页面宽度，或者在不同屏幕尺寸的设备上(PC，手机)尝试浏览器本页，你会发现下面的表格呈现出自适应布局特征，能够自动的使用不同的屏幕尺寸，数据的表现不会因为屏幕大小变化而变得不合适。
| 网站 | 网址 | 主题 | 评价 |
|---|---|---|---|
| 中国网页设计 | http://www.125jz.com | 网页设计、网页制作 | ★★★★★ |
| 手机521 | http://www.mobile521.com | 手机教程、手机推荐 | ★★★★★ |
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1324.html
微信扫一扫 
支付宝扫一扫