前端 HTML table 实现左侧第一列悬浮 其他可滑动
近日在前端上使用Layui转换静态table使用fixed: 'left'
实现左侧一列悬浮显示,实现是成功的但在iPhone上却显示错乱,复杂表头暂时寻找不到解决方案,所以一下切换悬浮技术使用css;
以下为悬浮显示效果,略图;
拍摄有些模糊…
下面为滑动后效果图
上代码
//
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/**.main {
width: 100%;
height: 100%;
position: absolute;
}*//
/**.layui-table-th span{
font-size: 18px;
}*/
//此处代码片为重点css技术
#html_tab th:first-child, #html_tab th:nth-child(0),#html_tab tr > td:first-child, #html_tab tr > td:nth-child(0) {
background-color: #ffffff;
position: fixed;
z-index: 2;
}
</style>
table代码
<style type="text/javascript">
function eachChart(list) {
//判断终端设备
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var tabl1;
if(isiOS){
tabl1 = "<table id=\"html_tab\" style='width:1300px;text-align:center;'>\n" +
"\n" +
" <thead>\n" +
" <tr >\n" +
" <td style=\"width:50px;text-align:center;white-space:nowrap;background-color: rgb(140,214,255); \"></td>\n" +
" <td style=\"width:50px;text-align:center;white-space:nowrap;background-color: rgb(140,214,255);\">地市</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维系统物理站址</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维系统维护站址</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >已起租站点</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维未起租<br/>在网</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维未起租<br/>待拆除</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维未起租<br/>在建</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维未起租<br/>无状态</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(140,214,255);\" >运维未起租<br/>合计</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租站点</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租<br/>运维无<br/>塔类</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租<br/>运维无<br/>室分</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租<br/>运维无<br/>微站</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租<br/>运维无<br/>传输</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租<br/>运维无<br/>非标类</td>\n" +
" <td style=\"text-align:center;width: 100px;background-color: rgb(255,171,34);\" >CRM起租<br/>运维无<br/>合计</td>\n" +
" </tr>\n" +
" </thead>\n" +
" <tbody>\n" +
"\n" +
"";
if (list != null) {
$.each(list, function (index, data) {
// 此处迭代拼接相应 tr td 展示数据
});
}
var str = tabl1;
str += "</tbody></table>";
$("#main4").html(str);
}else{
//此处为非苹果端设备执行原正常代码片
}
}
</style>
温馨提示:此左侧悬浮第一列需要一列相同大小的 td 内容可以为空 <td></td>,不设定第二列会被放到左侧悬浮显示。
以上生成 table 标签为字符串拼接形式,可根据个人需求嵌入使用和参考
在页面上 需将table嵌入到一个 div
中将 样式设置为 style="overflow-x:auto;"
表示表格超出 div
宽度可左右滑动
浏览器端显示效果