一个简单的html表自适应解决方案

目前有许多智能形式的自适应解决方案。

它们在桌面上翻转，将其转换为饼图，逐渐减少列，允许用户确定列，并允许在表格中进行部分滚动。这些都很聪明。

但是，我们还需要注意它们的缺点：

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;营销类型网站建设