目前有許多智能形式的自適應解決方案。

它們在桌面上翻轉，將其轉換為餅圖，逐漸減少列，允許用戶確定列，并允許在表格中進行部分滾動。這些都很聰明。

但是，我們還需要注意它們的缺點：

1.其中一些在實踐中很難實現，特別是那些在偽元素之前依賴:來生成頭的那些。

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

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

所以你想看到一個不需要javascript代碼的CSS，只需幾行css來解決自適應形式？請參閱以下示例：

解決方案1：超級簡單

您所要做的就是使用div來包含此表單。

.

然后添加以下CSS代碼

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

演示一個

解決方案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: 3pxsolid＃ Fff;背景色: rgba（0,0,0，3）;}

演示II

解決方案三：為每一個添加滾動條

以下jquery插件可以幫助您

JScrollPane的

自定義內容滾動

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

這是您看到的簡單響應形式。

標簽:＆amp; nbsp＆amp; nbsp沈陽Marketing type 網站建設＆amp; nbsp沈陽網站建設＆amp; nbsp沈陽APP development＆amp;營銷類型網站建設