• 微信
您当前的位置:首页  > 文章 >  响应式表格,HTML表格自适应(responsive table)

响应式表格,HTML表格自适应(responsive table)

作者:admin 时间:2020-01-06 阅读数:29人
简单自适应表格

前面的一篇文章里面我介绍到了一种简单的自适应表格制作方案,就是通过给表格的外面加了一个.table-container的标签

.table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } table{border:0; border-collapse:collapse;} table td,table th{border:1px solid #999; padding:.5em 1em} //添加IOS下滚动条 .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); }

 

bootstrap3自适应表格

Bootstrap3.0也类似这样子的简单自适应,当屏幕小于767像素时,表格就会自适应,多的隐藏可以滚动。

//code from http://caibaojian.com/responsive-tables.html @media (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; border: 1px solid #dddddd; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td { white-space: nowrap; }
 

声明

源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:https://www.dnwfb.com//850.html,转载请注明出处