js 实现table表格横向拉伸

大佬桑

已于 2023-08-14 03:36:27 修改

阅读量416

点赞数 1

文章标签： javascript 前端 css

于 2023-08-14 03:33:14 首次发布

本文链接：https://blog.csdn.net/SSS01233210/article/details/132268196

版权

纯js实现表格

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	    .box {
	        width: 100%;
	        height: 100%;
	    }
	    
	    table {
	        width: 100%;
	        height: 300px;
	    }
	
	    tr:nth-of-type(odd) {
	        background-color: #fff;
	    }
	    
	    tr:nth-of-type(even) {
	        background-color: #EDF6FA;
	    }
	    
	    th {
	        height: 40px;
	        background-color: #fff;
	        text-align: center;
	        padding: 0;
	        line-height: 40px;
	        color: #708BB3;
	        font-size: 14px;
	        border-right: 2px solid #E6EDEB;
	        vertical-align: middle;
	    }
	    
	    th:last-child {
	        width: 159px;
	        border-right: none;
	    }
	
	    td {
	        height: 40px;
	        line-height: 40px;
	        text-align: center;
	        color: #5C7191;
	        font-size: 12px;
	        border-right: 2px solid #E6EDEB;
	        padding: 0;
	        vertical-align: middle;
	        overflow: hidden;
	        text-overflow: ellipsis; 
	        white-space: nowrap;
	    }
	    
	    td:nth-child(1) {
	        width: 87px !important;
	    }
	    
	    td:last-child {
	        width: 159px !important;
	        cursor: pointer;
	        border-right: none;
	    }
	    
	    .tableDetail:hover {
	        text-decoration: none;
	    }
	
	    .tableDetail:before {
	        content: "";
	        display: inline-block;
	        vertical-align: middle;
	        width: 13px;
	        height: 15px;
	        margin-right: 4px;
	        background-size: 100%;
	    }
	
	    .tableDetail {
	        display: block;
	        margin: auto;
	        width: 60px;
	        height: 26px;
	        background: rgba(72, 158, 255, 1);
	        border: 1px solid rgba(69, 151, 245, 1);
	        box-shadow: 0px 1px 2px 0px rgba(120, 135, 142, 0.2); 
	        border-radius: 2px;
	        color: #fff !important;
	        font-size: 12px;
	        text-align: center;
	        line-height: 24px;
	        cursor: pointer;
	    }
	    </style>
	</head>
	<body>
	    <div class="box">
	        <table cellspacing="0" cellpadding="0" border="1" id="table">
	            <tr>
	                <th>語文</th>
	                <th>数学</th>
	                <th>英语</th>
	                <th>历史</th>
	                <th>地理</th>
	                <th>化学</th>
	                <th>生物</th>
	                <th>物理</th>
	                <th>政治</th>
	                <th>疯子</th>
	            </tr>
	            <tr>
	                <td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	            </tr>
	            <tr>
	                <td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	                <td>1</td>
	            </tr>
	        </table>
	    </div>
	</body>
	</html>
	
	<script>
	    function resizeTableCol(id){
	       var i,
	           self,
	           table = document.querySelector(id),
	           header = table.rows[0],
	           tableX = header.clientWidth,
	           length = header.cells.length;
	   
	       for (i = 0; i < length; i++) {
	           header.cells[i].onmousedown = function () {
	               self = this;
	               if (event.offsetX > self.offsetWidth - 10) {
	                   self.mouseDown = true;
	                   self.oldX = event.x;
	                   self.oldWidth = self.offsetWidth;
	               }
	           };
	           header.cells[i].onmousemove = function () {
	               if (event.offsetX > this.offsetWidth - 10) {
	                   this.style.cursor = 'col-resize';
	               } else {
	                   this.style.cursor = 'default';
	               }
	               if (self == undefined) {
	                   self = this;
	               }
	               if (self.mouseDown != null && self.mouseDown == true) {
	                   self.style.cursor = 'default';
	                   if (self.oldWidth + (event.x - self.oldX) > 0) {
	                       self.width = self.oldWidth + (event.x - self.oldX);
	                   }
	                   self.style.width = self.width;
	                   table.style.width = tableX + (event.x - self.oldX) + 'px';
	                   self.style.cursor = 'col-resize';
	               }
	           };
	           table.onmouseup = function () {
	               if (self == undefined) {
	                   self = this;
	               }
	               self.mouseDown = false;
	               self.style.cursor = 'default';
	               tableX = header.clientWidth;
	           };
	       }
	   }
	   
	   setTimeout(() => {
	       resizeTableCol('#table')  // #table根据自己的表格id命名
	   }, 300);
	</script>