目前有許多智能形式的自適應(yīng)解決方案。

它們?cè)谧烂嫔戏D(zhuǎn)，將其轉(zhuǎn)換為餅圖，逐漸減少列，允許用戶確定列，并允許在表格中進(jìn)行部分滾動(dòng)。這些都很聰明。

但是，我們還需要注意它們的缺點(diǎn)：

1.其中一些在實(shí)踐中很難實(shí)現(xiàn)，特別是那些在偽元素之前依賴:來(lái)生成頭的那些。

2.其中一些不適合所有類型的表格數(shù)據(jù)，例如餅圖。

3.其中一些可能被用戶拒絕。例如，消失的列。

所以你想看到一個(gè)不需要javascript代碼的CSS，只需幾行css來(lái)解決自適應(yīng)形式？請(qǐng)參閱以下示例：

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

您所要做的就是使用div來(lái)包含此表單。

.

然后添加以下CSS代碼

.table-container {width: 100％; overflow-y: auto; _overflow: auto; margin: 001em;}

演示一個(gè)

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

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

.table-container: -webkit-scrollbar {-webkit-appearance: none; width: 14px; height: 14px;}。table-container: -webkit-scrollbar-thumb {border-radius: 8px; border: 3pxsolid＃ Fff;背景色: rgba（0,0,0，3）;}

演示II

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

以下jquery插件可以幫助您

JScrollPane的

自定義內(nèi)容滾動(dòng)

jScroller

Tiny Scroller

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

也許您已經(jīng)注意到表的邊緣已被切割，向其添加模糊漸變圖層，并且為了容納所有設(shè)備，我們需要添加一些標(biāo)記。

.

以下是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)形式。

標(biāo)簽:＆amp; nbsp＆amp; nbsp沈陽(yáng)Marketing type 網(wǎng)站建設(shè)＆amp; nbsp沈陽(yáng)網(wǎng)站建設(shè)＆amp; nbsp沈陽(yáng)APP development＆amp;營(yíng)銷類型網(wǎng)站建設(shè)