在手机竖屏和PAD端表格显示的自适应处理,摘自《高性能HTML5》
复制粘贴就可以看效果哦。d
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> .table ul,.table li{ padding:0; margin:0; list-style:none; } .table{ display:table; } .tr{ display:table-row; } .td{ display:table-cell; } .table,.tr,.td{ border:1px solid #ccc; border-collapse:collapse; } .tableTreatment1{ width:800px; -webkit-box-shadow:2px 2px 2px #999999; -moz-box-shadow:2px 2px 2px #999999; box-shadow:2px 2px 2px #999999; } .tableTreatment1 .first{ background:#c8dfff; font-weight:bold; } .tableTreatment2{ width:320px; } .tableTreatment2 .table,.tableTreatment2 .tr,.tableTreatment2 .td{ border:none; } .tableTreatment2 .tableHead{ display:none; } .tableTreatment2 .tr{ width:200px; } .tableTreatment2 .td{ display:block; float:none; padding:5px; } .tableTreatment2 .td:first-child{ color:white; font-weight:bold; text-shadow:0 0 3px #333; background:#aebcbf; } .tableTreatment2 .td:before{ content:attr(data-colhead)":"; font-weight:bold; color:#777; } .tableTreatment2 .td:first-child:before{ content:""; } @media only screen and (max-width:767px){ .tableTreatment1{ width:320px; } .tableTreatment1 .table,.tableTreatment1 .tr,.tableTreatment1 .td{ border:none; } .tableTreatment1 .tableHead{ display:none; } .tableTreatment1 .tr{ width:200px; } .tableTreatment1 .td{ display:block; float:none; padding:5px; } .tableTreatment1 .td:first-child{ color:white; font-weight:bold; text-shadow:0 0 3px #333; background:#aebcbf; } .tableTreatment1 .td:before{ content:attr(data-colhead) ": "; font-weight:bold; color:#777; } .tableTreatment1 .td:first-child:before{ content:""; } } </style> </head> <body> <div class="table tableTreatment1"> <ul class="tr tableHead"> <li class="td" data-colhead=""></li> <li class="td" data-colhead="The Head"> The head </li> <li class="td" data-colhead="B"> B </li> <li class="td" data-colhead="C"> C </li> <li class="td" data-colhead="D"> D </li> <li class="td" data-colhead="E"> E </li> </ul> <ul class="tr tableBody"> <li class="td first" data-colhead=""> 0000 </li> <li class="td" data-colhead="The Head"> The head a </li> <li class="td" data-colhead="B"> BBBBBBB </li> <li class="td" data-colhead="C"> CCCCCCC </li> <li class="td" data-colhead="D"> DDDDDDD </li> <li class="td" data-colhead="E"> EEEEEEE </li> </ul> <ul class="tr tableBody"> <li class="td first" data-colhead=""> 111111 </li> <li class="td" data-colhead="The Head"> The head a </li> <li class="td" data-colhead="B"> BBBBBBB </li> <li class="td" data-colhead="C"> CCCCCCC </li> <li class="td" data-colhead="D"> DDDDDDD </li> <li class="td" data-colhead="E"> EEEEEEE </li> </ul> <ul class="tr tableBody"> <li class="td first" data-colhead=""> 22222 </li> <li class="td" data-colhead="The Head"> The head a </li> <li class="td" data-colhead="B"> BBBBBBB </li> <li class="td" data-colhead="C"> CCCCCCC </li> <li class="td" data-colhead="D"> DDDDDDD </li> <li class="td" data-colhead="E"> EEEEEEE </li> </ul> </div> </body> </html>
相关推荐
自适应Table表格样式代码是一款div css3响应式表格特效。
基于uniapp封装的table组件,表格宽度自适应,高度自适应,表头以及内容只传数值即可
基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
在简书上看的文章,上面用swift写的自适应,模仿写了OC的tableview自适应,省去了繁琐的对控件计算大小。
自适应Table表格样式代码是一款div css3响应式表格特效。
自适应Table表格样式代码是一款div css3响应式表格特效。
SWT表格管理类,包括表头排序事件,table宽度自适应事件,隔行颜色事件
basictable插件是一款jQuery自适应浏览器宽度响应式表格插件,可以设置breakpoint来定制自己的响应式断点,该表格能适应台式电脑,平板和手机的需求,响应式效果非常好,现在网站很多都有多平台版本了,这个效果非常...
鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css <style> .layui-table-cell{ display:table-...
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx
UITableviewCell高度自适应
<table class="table table-bordered table-hover"> 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table> 一款...
该代码是echart图表和table拼接的demo代码,包括自适应问题。
只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。 然后直接上template代码: <el data=tableData3 height=250 xss=removed> label=日期 width=180> </el>
基于bootstrap写的自适应表格,支持单元格在数据较多时单行显示。
插件描述:Tab选项卡tabulous.js. 参考示例:http://www.jq22.com/jquery-info5066
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
典型的三行两列居中高度自适应布局 如何使整个页面内容居中,如何使高度自适应内容自动伸缩,这是学习CSS布局最常见的问题。 下面给出一个实际的列子,附详细说明。 首先可以将下列代码复制到html文件中运行一下,...
本例通过修改flexigrid的源代码来实现列宽的自适应变化。如下使用:{display:'XXX',name:'XXX',width:'30%',sortable:false,align:center',hide: false},内附使用说明txt,这个是本人自己修改的,不足之处请见谅。