前端 HTML 使用 css 将 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 宽度可左右滑动

浏览器端显示效果