您现在的位置是:主页 > 建站知识 > 建站知识
自适应手机端表格(table)样式代码
admin2020-11-28【建站知识】人已围观
简介很多时候我们在网站后台更新内容的时候都会遇到插入表格,但是table有一个bug,就是不能兼容手机端浏览,所以所插入的表格一定要做成自适应的才能方便用户浏览,以下是我做网站
很多时候我们在网站后台更新内容的时候都会遇到插入表格,但是table有一个bug,就是不能兼容手机端浏览,所以所插入的表格一定要做成自适应的才能方便用户浏览,以下是我做网站的时候做写的代码供大家参考:
table { table-layout:fixed !important; width:80% !important; border-collapse:collapse; border:none; margin:0 auto; }
td,th { width:1px; white-space:nowrap; /* 自适应宽度*/ word-break:keep-all; /* 避免长单词截断,保持全部 */ border:solid #676767 1px; text-align:center; white-space:pre-line; word-break:break-all !important; word-wrap:break-word !important; display:table-cell; vertical-align:middle !important; white-space: normal !important; height:auto; vertical-align:text-top; padding:2px 2px 0 2px; display: table-cell; }
注:
由于大家都使用excel做表格,所以这里推荐一个很好用的工具可以轻松完成将已有的Excel、Word等表格内容一键转为html代码的网站,将它们复制到源码(html)模式下,就可以完成表格的转换了。。。
http://www.huanglucheng.com/table-clear/table.html 点击打开这个地址就可以使用这个工具了,是不是很方便,哈哈!
另外大家在html插入表格的时候难免会遇到合并单元格的困扰,这里也把相对应的代码贴出来给大家参考啦:
colspan:左右合并单元格的个数;
用法:colspan=”3″ 横向合并三个单元格‘。
rowspan:上下合并单元格的个数;
用法:rowspan=”3″ 垂直合并三个单元格。
很赞哦! ()
相关文章
文章评论

说点什么吧
- 全部评论(0)
(126565165) 评论 织梦图集整合layui上传:非常感谢...
(4568544521) 评论 织梦图集整合layui上传:感谢分享
(653625086) 评论 【织梦评论插件】:问题沃尔特
(1573123400) 评论 Sublime Text3 安装Anaco:同样是这么设置的,但是没有起作用啊
(275033389) 评论 织梦图集整合layui上传:果然还是大神多,正想要这样一个东西,无意中发现,感谢
(408256272) 评论 我们到底需要怎样的:就斤斤计较斤斤计较斤斤计较经济军
(28315700) 评论 【织梦评论插件】:妈的。提取码呢
(12313123) 评论 【织梦评论插件】:顶起顶起img src=/plus/liujiuge-comment/face/wx.gif title=微笑
(1225141300) 评论 火车采集器破解版 :不错不错
(1783967478) 评论 织梦图集整合layui上传:好好好好
dd 评论 安装Photoshop Cs6后,界:怎么打开代码编辑器。。 管理员回复: 你到网上下载一个代码
1817777858 评论 【织梦评论插件】:答复ASFnbsp; 不错
泗阳小哒格 评论 火车采集器破解版 :测试了,可以使用,从火车采集导出到这里也可以导入!多谢!
方元博客是猪 评论 火车采集器破解版 :骗子,这是高铁采集器不是火车采集器
7777777 评论 【织梦评论插件】:怎么私聊 管理员回复: 首页的右上角有我的qq或者微信
zj 评论 如何处理网站陈旧的:真实代发,空包网网站www.danhw.com
651591543@qq.com 评论 自适应手机端表格(:- -怎么用
哼哈 评论 自适应手机端表格(:谢谢,解决了问题,很好用
devil 评论 JS控制li 点击li时自动:点击二级导航,一级导航的样式还是没有了
178876207@qq.com 评论 织梦自定义图片字段:非常好的教程, 这个文件在网上找了几天都解决不了
666 评论 dedecms图集的关键词保:没有XSS过滤不安全,直接在后台目录/config.php中80行加入不过滤的
413466985 评论 【织梦评论插件】:请问多少钱啊 管理员回复: 请私聊我
个 评论 【织梦评论插件】:感谢分享
色弱 评论 【织梦评论插件】:img src=/plus/liujiuge-comment/face/cy.gif title=龇牙
1 评论 人最重要的能力是什:好好学习天天向上
还没有评论,快来抢沙发吧!