亚洲乱码卡一卡二卡三永久-亚洲乱码一二三四区-亚洲乱码一区二区三区在线观看-亚洲伦理一区-成人在色线视频在线观看免费大全-成人在线91

目前有很多智能的表格自適應(yīng)解決方案。

他們分別是 flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns,設(shè)置允許 partial scrolling across the table.而這些都是智能的。

然而，我們也要注意到它們的缺點(diǎn)：

• 1.他們有一些在實(shí)際中是難以實(shí)現(xiàn)的，尤其是那些依靠::before偽元素來(lái)生成表頭的。

• 2.他們之中有一些不適合所有類(lèi)型中的表數(shù)據(jù)，例如pie chart.

• 3.他們之中有一些可能被用戶所拒絕。例如消失的列。

那么你想看到一個(gè)不需要javascript代碼，只需要幾行css就能解決自適應(yīng)表格的CSS嗎？請(qǐng)看下面的例子：

解決方案1：超級(jí)簡(jiǎn)單

你需要做的就是用一個(gè)div來(lái)包含這個(gè)表格。

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

然后添加下面的CSS代碼

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

演示一

解決方案2：為IOS添加滾動(dòng)條

如果你在iOS下面（如iPhone）看這個(gè)案例的話，你會(huì)看不到滾動(dòng)條，雖然用戶可以滑動(dòng)表格滾動(dòng)，但是這是不明顯的。我們只需要添加一些額外的CSS就能解決這個(gè)問(wèn)題。

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

演示二

解決方案三：為每一個(gè)添加滾動(dòng)條

下面這些jquery插件可以幫到你

• jScrollPane

• Custom content scroller

• jScroller

• Tiny Scroller

解決方案四：添加一個(gè)漸變層

也許你已經(jīng)注意到了表格的邊緣被切割了，給它添加一個(gè)模糊的漸變層，為了適應(yīng)所有的設(shè)備，我們還需要添加一些標(biāo)記。

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

這就是你所看到的簡(jiǎn)單的自適應(yīng)表格了。