css 表格自适应一些方法总结
目前有很多智能的表格自适应解决方案。
他们分别是 flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns,设置允许 partial scrolling across the table.而这些都是智能的。
然而,我们也要注意到它们的缺点:
1.他们有一些在实际中是难以实现的,尤其是那些依靠::before伪元素来生成表头的。
2.他们之中有一些不适合所有类型中的表数据,例如pie chart.
3.他们之中有一些可能被用户所拒绝。例如消失的列。
那么你想看到一个不需要javascript代码,只需要几行css就能解决自适应表格的CSS吗?请看下面的例子:
解决方案1:超级简单
你需要做的就是用一个div来包含这个表格。
代码如下 | 复制代码 |
<div class="table-container"> <table> ... <table> </div> |
然后添加下面的CSS代码
代码如下 | 复制代码 |
.table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } |
演示一
解决方案2:为IOS添加滚动条
如果你在iOS下面(如iPhone)看这个案例的话,你会看不到滚动条,虽然用户可以滑动表格滚动,但是这是不明显的。我们只需要添加一些额外的CSS就能解决这个问题。
代码如下 | 复制代码 |
.table-container::-webkit-scrollbar .table-container::-webkit-scrollbar-thumb |
演示二
解决方案三:为每一个添加滚动条
下面这些jquery插件可以帮到你
jScrollPane
Custom content scroller
jScroller
Tiny Scroller
解决方案四:添加一个渐变层
也许你已经注意到了表格的边缘被切割了,给它添加一个模糊的渐变层,为了适应所有的设备,我们还需要添加一些标记。
代码如下 | 复制代码 |
<div class="table-container-outer"> <div class="table-container-fade"></div> <div class="table-container"> <table> ... <table> </div> </div> |
下面是CSS
代码如下 | 复制代码 |
.table-container-outer { position: relative; } .table-container-fade |
这就是你所看到的简单的自适应表格了
您可能感兴趣的文章:
css 表格自适应一些方法总结
css控制table表格宽度的小技巧教程
在用CSS创建类及id时应注意的一些规范化命名
使用html表格和CSS进行混合网页设计
网页技巧之怎样编写CSS
网页制作 谈谈CSS样式表的命名规范
对CSS类及id的规范化命名
实时切换网页的CSS样式实现
php和css有什么关联
DIV CSS网页布局对SEO优化有哪些影响