表格自适应 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%;

}

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

表格自适应 css,css 表格自适应一些方法总结相关推荐

html中设置表格单实线,css实现表格实线的方法
css实现表格实线的方法发布时间:2020-08-21 14:46:18 来源:亿速云阅读:147 作者:小新这篇文章主要介绍了css实现表格实线的方法,具有一定借鉴价值,需要的朋友可以参考下. ...
CSS控制表格的方法
现在的网页都是DIV+CSS来布局的,table布局时代早已经结束了,那table还能干什么呢? 当然是现实数据了,这才是他的本事! 表格框架要和CSS分离,还table纯结构,需要琢磨一下,下面是一 ...
纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
纯html+css固定表格一列或多列,其余进行横向滚动的方法工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...
纯html+css固定表格一列或多列,其余进行横向滚动的方法工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
html分割线自动适应,CSS实现自适应分隔线的N种方法
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了, 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景 ...
Html设置表格撑开,【CSS】表格或div被撑开的解决办法
摘要:后台添加内容后才发现显示的页面被撑开,导致网页极度不美观.,现在潇湘在线把平时找到的防止表格或div被撑开的好方法总结归纳一下,和大家一起分享. 在我们设计网页的时候,总会遇到一些不愉快的事情, ...
css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么发布时间:2020-12-05 13:24:07 来源:亿速云阅读:102 作者:小新这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
wordpress自适应表格_给WordPress添加自适应表格让表格自适应屏幕
wordpress自带的表格不能自适应屏幕宽带,每次新建了表格,电脑上显示正常的,结果换到手机上就超出屏幕宽度了,很麻烦,更重要的是很不美观,本次我就问为大家带来一个添加自适应表格的教程. 案列分析 ...

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

表格自适应 css,css 表格自适应一些方法总结相关推荐

最新文章

热门文章