主页 > 教程合集 > Html/css >

一个简单的html表格自适应解决方案推荐

时间:2019-03-27 阅读:0

目前有很多智能的表格自适应解决方案。

他们分别是 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.而这些都是智能的。

一个简单的html表格自适应解决方案推荐

然而,我们也要注意到它们的缺点:

1.他们有一些在实际中是难以实现的,尤其是那些依靠::before伪元素来生成表头的。

2.他们之中有一些不适合所有类型中的表数据,例如pie chart.

3.他们之中有一些可能被用户所拒绝。例如消失的列。

那么你想看到一个不需要javascript代码,只需要几行css就能解决自适应表格的CSS吗?请看下面的例子:

简单的表格

你需要做的就是用一个div来包含这个表格:


<div class="table-container">
<table>
...
<table>
</div>
 

然后添加下面的CSS代码:


.table-container
{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}
 

演示地址

为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);
}
 

演示地址

本站所有资源均在余斗淘宝店铺有售,你可以扫描以下店铺二维码直接选购,自动极速发货。你也可以微信扫描二维码添加好友,直接微信索取更便捷!

余斗微信二维码

扫描微信加好友购买
比淘宝买便宜

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2019-03-27最后更新,转载注明出处。

相关推荐

返回顶部