表格自适应 css,css 表格自适应一些方法总结

css中表格自适应有很多解决办法，一种就是直接使用css定义div，另一种是使用js与jquery来实现，希望此教程对各位同学会有所帮助。

目前有很多智能的表格自适应解决方案。

他们分别是 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来包含这个表格。 代码如下 复制代码

...

然后添加下面的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

解决方案四：添加一个渐变层

也许你已经注意到了表格的边缘被切割了，给它添加一个模糊的渐变层，为了适应所有的设备，我们还需要添加一些标记。 代码如下 复制代码

下面是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);

}

这就是你所看到的简单的自适应表格了