css 表格自適應一些方法總結

目前有很多智能的表格自適應解決方案。

他們分別是 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); }

這就是你所看到的簡單的自適應表格了