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

他们分别是 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
{
-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

解决方案四:添加一个渐变层

也许你已经注意到了表格的边缘被切割了,给它添加一个模糊的渐变层,为了适应所有的设备,我们还需要添加一些标记。

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

这就是你所看到的简单的自适应表格了。

稳定

产品可用性高于99.9%

贴心

全国7*24小时客服热线

专业

产品经理在线技术支持

快速

快速建站上线运营快

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部