html表格如何做成响应式,响应式web中的表格处理

在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况，下面给出几种响应式表格的解决方法：

一：隐藏不重要数据列

处理前：

处理后：

实现方法：

[css]@media only screen and (max-width: 800px) {

table td:nth-child(2),

table th:nth-child(2) {display: none;}

}

@media only screen and (max-width: 640px) {

table td:nth-child(4),

table th:nth-child(4),

table td:nth-child(7),

table th:nth-child(7),

table td:nth-child(8),

th:nth-child(8){display: none;}

}

[/css]

以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。

二：固定首列，剩余列横向滚动

处理前：

处理后：

实现方法：将横向的表头利用 CSS 改为纵向显示并固定位置，其余内容部分不变并出现横向滚动条。tbody 上应用 white-space:nowrap; tbody tr 下应用 display:inline-block;

三：多列横向变2列纵向

处理前：

处理后：

实现方法：

定位隐藏，变块元素，并绑定对应列名，然后用伪元素的content:attr(data-th)实现

插件推荐：

html表格如何做成响应式,响应式web中的表格处理相关推荐

单元格格式在哪儿_excel中，表格样式的自动套用在哪里
如果你需要套用表格格式,可以直接在开始选项卡,点击套用表格格式即可: 敬请参考如下图片: 套用好了表格格式之后,可以点击表格,在表哥工具上点击清除格式即可. 如何使excel下一页自动套用上一页的格式 ...
python生成word文档的表格_说说如何使用 Python 在 word 中创建表格
我们可以使用 python-docx 模块,实现在 word 中创建表格. 请看下面这段代码: table = doc.add_table(rows=1, cols=len(titles)) # 设置 ...
latex 中表格怎么指定编号_科学网—latex中简单表格制作+标题+编号+固定位置 - 江亿平的博文...
Type one: %%%%%%%%%%简单表格%%%%%%%%%% begin{tabular}{|c|c|} hline a & b \hline c & d\ hline end ...
表格的背景图片怎么弄HTML,HTML中新建表格怎么加背景
在html中,可以使用background属性设置新建表格中的背景,只需要给表格元素设置"background:属性值"即可.background属性在一个声明中设置所有的背景属性 ...
Word的样式库在选项卡中_Word|表格的设置
1.插入表格的方法 1.插入选项卡→表格 2.文本转表格: 步骤1:选中要转换成表格的文本步骤2:单击"插入"选项卡→"表格"组中的"表格" ...
web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格文章目录 web前端开发基础--在网页中使用表格前言一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码前言本篇主要 ...
php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
java读取word中的表格并存入到mysql数据库中实例
将D://word_export.doc(word2003)文件中表格数据读取出来并存入到数据库中.表格数据如下图所示: 20064001 刘景玉 1987-01-25 男河南商丘 20064002 ...
android 如何制作可编辑的表格,在手机wps中编辑表格的方法
我们可以在手机版本的wps中对表格进行编辑,对于新手来说可能不知如何操作,下面就让学习啦小编告诉你如何在手机wps中编辑表格的方法,希望对大家有所帮助. 在手机wps中编辑表格的方法首先,下载并安装 ...

html表格如何做成响应式,响应式web中的表格处理

html表格如何做成响应式,响应式web中的表格处理相关推荐

最新文章

热门文章