表格⾃适应css,css表格⾃适应⼀些⽅法总结
css中表格⾃适应有很多解决办法，⼀种就是直接使⽤css定义div，另⼀种是使⽤js与jquery来实现，希望此教程对各位同学会有所帮助。
⽬前有很多智能的表格⾃适应解决⽅案。
他们分别是 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来包含这个表格。 代码如下 复制代码
...
css设置表格滚动条然后添加下⾯的CSS代码 代码如下 复制代码
.table-container
{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}
演⽰⼀
解决⽅案2：为IOS添加滚动条
如果你在iOS下⾯(如iPhone)看这个案例的话，你会看不到滚动条，虽然⽤户可以滑动表格滚动，但是这是不明显的。我们只需要添加⼀些额外的CSS就能解决这个问题。 代码如下 复制代码
.table-container::-webkit-scrollbar
{
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb
{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
演⽰⼆
解决⽅案三：为每⼀个添加滚动条
下⾯这些jquery插件可以帮到你
jScrollPane
Custom content scroller
jScroller
Tiny Scroller
解决⽅案四：添加⼀个渐变层
也许你已经注意到了表格的边缘被切割了，给它添加⼀个模糊的渐变层，为了适应所有的设备，我们还需要添加⼀些标记。 代码如下 复制代码
下⾯是CSS 代码如下 复制代码
.table-container-outer { position: relative; }
.table-container-fade
{
position: absolute;
right: 0;
width: 30px;
height: 100%;
background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);
}
这就是你所看到的简单的⾃适应表格了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。