注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

纯CSS重构table表格使之响应式适应移动端  

2015-07-09 15:53:29|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
由于手机屏幕空间有限,太大的表格很难友好显示,本文介绍一种使用纯CSS实现响应式表格的方法,可以比较完美的在手机端显示。

在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每列内容会拥挤不堪,甚至出现横向滚动条,用户快速了解每条项目基本情况的效率会大打折扣。

Snip20150407_5


Snip20150407_6


一种优化方法是:使用media queries监测屏幕viewport小于568px时,让单元格(td)独占一行,每行(tr)相互隔离,如同每条项目为一独立的表格,如下图:

Snip20150407_7


现在每条项目便于阅读了,但表头(th)与对应的单元格(td)隔离开了,单元格的具体意义难以理解。那么,隐藏掉表格的thead,单元格内容右对齐,在每个单元格前面插入对应的表头(th)即可解决这个问题,如下图:

Snip20150407_9


伪元素(:before)结合att()表达式(获取伪元素所依附元素的HTML属性值)可完成此任务。当然,我们首先要对每个单元格(td)元素改造:

Snip20150407_10


样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
table {
    border1px solid #ccc;
    width100%;
    margin0;
    padding0;
    border-colla<a href="/fw/photo.html" target="_blank">ps</a>e: collapse;
    border-spacing0;
}
table tr {
    border1px solid #ddd;
    padding5px;
}
table th,
table td {
    padding10px;
    text-aligncenter;
}
table th {
    text-transformuppercase;
    font-size14px;
    letter-spacing1px;
}
/* <= 568px */
@media screen and (max-width35.5em) {
    table {
        border0;
    }
    table thead {
        displaynone;
    }
    table tr {
        margin-bottom10px;
        displayblock;
        border-bottom2px solid #ddd;
    }
    table td {
        displayblock;
        text-alignright;
        font-size13px;
        border-bottom1px dotted #ccc;
    }
    table td:last-child {
        border-bottom0;
    }
    table td:before {
        contentattr(data-label);
        floatleft;
        text-transformuppercase;
        font-weightbold;
    }
}
  评论这张
 
阅读(390)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017