html表格整体自适应,简单的html表格自适应解决方案

转载的部分

下文转载自前端开发博客：

你需要做的就是用一个div来包含这个表格。

...

然后添加下面的CSS代码//code from http://caibaojian.com/simple-responsive-table.html

.table-container

{

width: 100%;

overflow-y: auto;

_overflow: auto;

margin: 0 0 1em;

}

为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插件可以帮到你也许你已经注意到了表格的边缘被切割了，给它添加一个模糊的渐变层，为了适应所有的设备，我们还需要添加一些标记。

下面是CSS.table-container-outer { position: relative; }

.table-container-fade

{

position: absolute;

right: 0;

width: 30px;

height: 100%;

}

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

实际使用的部分

body

{

margin:0;

padding:20px;

color:#000;

background:#fff;

font:100%/1.3helvetica,arial,sans-serif;

}

h1{margin:0;}

.container{width:100%;}

table

{

margin:0;

border-collapse:collapse;

}

td,th

{

padding:.5em1em;

border:1pxsolid#999;

}

.table-container-outer{position:relative;}

.table-container

{

width:100%;

overflow-y:auto;

_overflow:auto;

margin:001em;

}

.table-container::-webkit-scrollbar

{

-webkit-appearance:none;

width:14px;

height:14px;

}

.table-container::-webkit-scrollbar-thumb

{

border-radius:8px;

border:3pxsolid#fff;

background-color:rgba(0,0,0,.3);

}

.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);

}

111

效果截图

使用上述代码可是实现下图效果。

总结

原有代码是适适合自己写模板用的，或者写单独的html文件用的。

我删减了部分，直接发到超文本编辑框html粘贴进去就可以了。

html表格整体自适应,简单的html表格自适应解决方案相关推荐

html表格整体居中对齐,css中表格如何居中对齐？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 下面我们来看一下 ...
android简单实现表格布局,Android开发中TableLayout表格布局
Android开发中TableLayout表格布局一.引言在移动端应用程序开发中,常常会使用到表格布局,iOS和Android开发框架中都提供了独立的表格视图控件供开发者使用,例如iOS中的UIT ...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
表格合并行_Word制作验收单表格，很简单，快来学习吧
作者:图文设计师东东办公软件Word制作一款简单的验收单表格,方法很简单,大家一起来学习吧! 第一步.新建.插入表格打开Word新建--空白文档,输入标题"验收单".如下图. ...
python excel库 linux_用python写一个简单的excel表格获取当时的linux系统信息
最近在学习excel表格的制作,顺便结合之前学习的内容,利用python的两个模板,分别是获取系统信息的psutil,和生成excel表格的xlsxwriter.利用这两个模板将生成一个简单的exce ...
java 简单获取Excel表格内容（初学者）
java 简单获取Excel表格内容(初学者) 代码: package cn.ccaih.read;import org.apache.poi.ss.usermodel.Cell; import or ...
在写CSDN的文章时，如何插入表格并进行简单的配置
在写CSDN的文章时,如何插入表格并进行简单的配置 (如果这篇文章对你有所帮助,请为我点个赞,要问我点赞有什么作用,嘿嘿,只是为了我的心情愉悦(*￣︶￣)) 最近在CSDN上写一些文章,有的时候需 ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...

html表格整体自适应,简单的html表格自适应解决方案

html表格整体自适应,简单的html表格自适应解决方案相关推荐

最新文章

热门文章