zhouzhendong
/
baoshi-was


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap-grid.css" rel="stylesheet">
    <style type="text/css">
        #test th{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index:999;
            background-color: white;
        }
    </style>
</head>
<body>
<button onclick="a()">11111111</button>
<table id="table" cellspacing="0" cellpadding="2" width="100%" border="1">
    <tr id="test" style="white-space: nowrap !important;">
        <th >用户编号</th>
        <th>试用时间</th>
        <th>转正时间</th>
        <th>生日时间</th>
        <th>民族</th>
        <th>身高</th>
    </tr>
    <tr>
        <td style="overflow-x: hidden"><div>1</div>200004512312312321321</td>
        <td>2001-2-15</td>
        <td>2001-3-15</td>
        <td>1978-8-5</td>
        <td>汉</td>
        <td>162</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171

        </td>
    </tr>
</table>
<div style="position: sticky;bottom: 0;left: 0;background-color: #007bff;width: 50px;height: 50px;cursor: pointer;text-align: center">
    <h1><span class="fa fa-spin fa-gear" style="color: #1b1e21"></span></h1>
</div>
<script type="text/javascript">
    var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题

    var table = document.getElementById("table");
    function a1() {
        let div = document.createElement("div");
        div.className = "test ";
        div.className += "test1";
        div.className += "test2";
        console.log(div);
    }
    function a() {
        sessionStorage.setItem("test","测试存储效果");
        console.log(sessionStorage.getItem("test"))
    }
    function a2() {
        for (let i=0;i<table.children[0].children.length;i++){
            let arr = table.children[0].children[i].children;
            for (let j=0;j<arr.length;j++){
                let td = arr[j];
                let div = document.createElement("div");
                div.style.overflowX = "hidden";
                let count = td.childNodes.length;
                for (let k=0;k<count;k++){div.appendChild(td.childNodes[0]);}
                td.appendChild(div);
            }
        }
    }
    var down = false;
    for (i = 0; i < table.rows[0].cells.length; i++) {
        table.rows[0].cells[i].onmousedown = function () {
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) {
                down = true;
                tTD.oldX = event.x;
                tTD.oldWidth = tTD.offsetWidth;
            }
            //记录Table宽度
            table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
            tTD.tableWidth = table.offsetWidth;
        };
        table.rows[0].cells[i].onmousemove = function () {
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10)
                this.style.cursor = 'col-resize';
            else
                this.style.cursor = 'default';
            //取出暂存的Table Cell
            if (tTD == undefined) tTD = this;
        }
    }
    document.onmouseup = function () {
        if (down) {
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            down = false;
            tTD.style.cursor = 'default';
        }
    };
    document.onmousemove = function () {
        if (down) {
            //调整宽度
            if (down) {
                tTD.style.cursor = 'default';
                if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                    tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                //调整列宽
                tTD.style.width = tTD.width;
                tTD.style.cursor = 'col-resize';
                //调整该列中的每个Cell
                table = tTD;
                while (table.tagName != 'TABLE') table = table.parentElement;
                setTimeout(()=>{
                    for (i = 0; i < table.rows.length; i++) {
                        let td = table.rows[i].cells[tTD.cellIndex];
                        td.firstChild.style.width = tTD.width+"px";
                    }
                });
                //调整整个表
                table.width = tTD.tableWidth + (tTD.offsetWidth - tTD.oldWidth);
                table.style.width = table.width;
            }
        }
    };
</script>
</body>
</html>