18.8.15table滚动条

其他 2018-09-28 20:17:02 阅读次数: 0

1.纵向/横向滚动条,首行固定,首列不固定   (纯css)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		div {
			height:200px;
			width:300px;
			overflow-x: auto;
		}
		
       .table1{
         width: 100%;
         height:100%;    
		border-collapse:collapse;		 
		 <!-- position:relative; -->
		 
       }
	  
       .thead{
         display: block;
         height: 40px;
         line-height: 40px;
         text-align:left;
       }
       .tbody{
         display: block;
         width: 100%;
         height: calc(100% - 40px);
         overflow: auto;
       }
		.table1 td, .table1 th {
	    border:1px solid #98bf21;
		padding:3px 7px 2px 7px;
		white-space:nowrap;
		min-width:180px;
	   }
	   .table1 th{
	   border-bottom:none;
	   }
	   .tbody tr:hover{
		background-color:pink;
		}
		
    </style>
</head>
<body>

<div>
    <table class="table1">
        <thead class="thead">
         <tr>
             <th>姓名</th>
             <th>性别</th>
             <th>年龄</th>
             <th>省份证号</th>
             <th>地址</th>
         </tr>
         </thead>
         <tbody class="tbody">
         <tr>
             <td>张三开始</td>
             <td>男</td>
             <td>1</td>
			 <td>1111111111111111</td>
             <td>1xxxxxxxxxxxxxxxxxxx</td>          
         </tr>
         <tr>
             <td>张三1</td>
             <td>男</td>
             <td>2</td>
             <td>2222222222222222</td>
             <td>2xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         <tr>
             <td>张三2</td>
             <td>男</td>
             <td>3</td>
             <td>33333333333333</td>
             <td>3xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         <tr>
             <td>张三</td>
             <td>男</td>
             <td>4</td>
             <td>44444444444444</td>
             <td>4xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         <tr>
             <td>张三</td>
             <td>男</td>
             <td>5</td>
             <td>55555555555555</td>
             <td>5xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         <tr>
             <td>张三</td>
             <td>男</td>
             <td>6</td>
             <td>666666666666666666</td>
             <td>6xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         <tr>
             <td>张三</td>
             <td>男</td>
             <td>7</td>
             <td>7777777777777777</td>
             <td>7xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         <tr>
            <td>张三</td>
            <td>男</td>
            <td>8</td>
            <td>888888888888888888</td>
            <td>8xxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>9</td>
            <td>99999999999999999</td>
            <td>9xxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
            <td>00000000000000</td>
            <td>10xxxxxxxxxxxxxxxxxxx</td>
        </tr>
         <tr>
             <td>张三结束</td>
             <td>男</td>
             <td>11</td>
             <td>1123423423432423</td>
             <td>11xxxxxxxxxxxxxxxxxxx</td>
         </tr>
         </tbody>
     </table>
</div>
	<label>
        <input type="checkbox"  style="vertical-align:middle;" />
        <span style="vertical-align:middle;" >张三结束</span>
    </label>

</body>
</html>

2.纵向/横向滚动条,首行固定,首列固定   (css+jquery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS和CSS固定标题列与首列</title>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //#region table滚动处理
                var top = 0;
                var left = 0;
                var el = document.getElementById("myBody");
                var ths = el.getElementsByTagName("th");

                el.onscroll = function (e) {
                    var tempTop = el.scrollTop;
                    var tempLeft = el.scrollLeft;

                    if (top != tempTop) {
                        top = tempTop;
                        for (var i = 0; i < ths.length; i++) {
                            ths[i].style.top = tempTop + "px";
                        }
                    }
                    if (left != tempLeft) {
                        left = tempLeft;
                        $(".locked").css("left", tempLeft + "px");
                    }
                }
                //#endregion
            })
    </script>
    <style type="text/css">
        #myRepeater td, #myRepeater th
        {
            border: 0.1px solid #cccccc;
            white-space: nowrap;     /*文本不进行换行*/
            text-align: center;
        }
        #myRepeater th
        {
            position: relative;
            z-index: 1;
			background-color:white;
        }
        #myRepeater th.locked
        {
            z-index: 2;
        }
        #myRepeater td.locked
        {
            position: relative;
            left: 0px;
            background-color: red;
        }
    </style>
</head>
<body>
  <div id='myBody' style="width: 250px; height: 100px; overflow: scroll; margin: auto;" align = 'center'>
    <table id='myRepeater' cellspacing="0" align = 'center'> 
        <tr style='background-color: rgb(50,152,120);'> 
            <th  class='locked'>姓名</th> 
            <th>年龄</th> 
            <th>性别</th> 
            <th>籍贯1</th> 
            <th>籍贯2</th> 
            <th>籍贯3</th> 
            <th>籍贯4</th> 
            <th>籍贯5</th> 
        </tr> 
        <tr> 
            <td  class='locked'>张三</td> 
            <td>21</td> 
            <td>男</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
        </tr> 
        <tr> 
            <td  class='locked'>李四</td> 
            <td>22</td> 
            <td>男</td> 
            <td>彝族</td> 
            <td>彝族</td> 
            <td>彝族</td> 
            <td>彝族</td> 
            <td>彝族</td> 
        </tr> 
        <tr> 
            <td  class='locked'>程柳</td> 
            <td>22</td> 
            <td>女</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
        </tr> 
        <tr> 
            <td  class='locked'>张三</td> 
            <td>21</td> 
            <td>男</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
        </tr> 
        <tr> 
            <td  class='locked'>李四</td> 
            <td>22</td> 
            <td>男</td> 
            <td>彝族</td> 
            <td>彝族</td> 
            <td>彝族</td> 
            <td>彝族</td> 
            <td>彝族</td> 
        </tr> 
        <tr> 
            <td  class='locked'>程柳</td> 
            <td>22</td> 
            <td>女</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
            <td>汉族</td> 
        </tr> 
    </table> 
    </div>
</body>
</html>

3.纵向/横向滚动条,首行固定,首列固定   4个table(纯css,看下浏览器的兼容性)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .contain {
            border: 1px solid #cdd;
            width: 500px;
            height: 300px;
            overflow: scroll;
            position: relative;
            float: left;
            top: 100px;
            left: 50px;
        }    
        th, td, tr {
            border: 1px solid #cdd;
            height: 30px;
            width: 100px;
            text-align: center;
        }

        .tb1 {
            background: gray;
            position: fixed;
            z-index: 10001;
            width: 100px;
        }

        .tb2 {
            background: pink;
            position: sticky;
            top: 0px;
            margin-left: 100px;
            width: 500px;
            z-index: 1000;
        }

        .tb3 {
            background: green;
            left: 0px;
            height: 100%;
            float: left;
            position: sticky;
            z-index: 1000;
            width: 100px;
        }

        .tb4 {
            left: 100px;
            width: 500px;
            position: absolute;
        }
    </style>
</head>
<body>
<!--浏览器的兼容性-->
<div class="contain">
    <table class="tb1" cellspacing="0">
        <thead>
        <th>姓名
    </table>
    <table class="tb2" cellspacing="0">
        <thead>
        <th>Java
        <th>Python
        <th>Golang
        <th>Rust
        <th>Ruby
    </table>
    <table class="tb3" cellspacing="0">
        <tbody>
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
        <tr>
            <th>phermis
    </table>
    <table class="tb4" cellspacing="0">
        <tbody>
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
        <tr>
            <td>100
            <td>100
            <td>100
            <td>100
            <td>100
    </table>
</div>
</body>
</html>

4.Intel  js+css

css:
<style type="text/css">
        #ftr td
        {
            position: relative;
            z-index: 1;
			background-color:white;
        }
        #ftr td.locked
        {
            z-index: 2;
        }
        tbody td.locked
        {
            position: relative;
            left: 0px;
            background-color: white;
        }

#UE_table{width: 100%;height:100%;position: relative;}
#UE_table tr td{width:125px;word-wrap:break-word ;padding-right:0;} 
#UE_table tr td:last-child{text-align:left;}
#ftr{display: block;height: 35px;line-height:auto;margin-bottom:5px;padding-top:5px;background:#ffffff;box-shadow:1px 2px 6px 0 rgba(221,221,221,0.50);}
#UE_table tbody{ display: block;width: 100%;height: calc(100% - 50px);overflow: auto;}
#UE_table tbody tr:nth-child(1){margin-bottom: 5px;}
#UE_table tbody tr td{color:#5e5e5e;}

.vlan_table tr:first-child{
	margin-bottom:0px;	
}
.vlan_table tr{
	background:#ffffff;
	box-shadow:1px 2px 6px 0 rgba(221,221,221,0.50);
	display:block;
	margin-bottom:5px;
	padding-top:5px;
}
.vlan_table td{
	display:inline-block;	
	font-size:12px;
	color:#5e5e5e;
    letter-spacing:0.45px;
    text-align:left;
	padding-right:5px;
}
.vlan_table tr:first-child  td{
	font-size:12px;
	color:#acacac;
	letter-spacing:0.38px;
	text-align:left;
}
.vlan_table tr td:last-child{
	display:inline-block;	
	text-align:right;
	padding-right:10px;
}

</style>

html:
<div id="ue_table_container">
			<table id="UE_table" class="vlan_table"></table>
</div>

js:
				overviewtable('UE_table',UETableData,columnNames);	
				if(UETableData.length*28 >= 280){
					$("#ue_table_container").css("height","300px");
					$("#ue_table_container").css("overflow-x","auto");
					$("#ue_table_container").css("overflow-y","hidden");
				}else{
					$("#ue_table_container").css("height","auto");
					$("#ue_table_container").css("overflow-y","auto");
					$("#ue_table_container").css("overflow-x","auto");
				}
				$("#UE_table tbody tr").each(function(){
					$(this).find("td:first").addClass("locked"); 
				})
				$("#ftr td:eq(0)").addClass("locked"); 
				//
                var left = 0;
                var el = document.getElementById("ue_table_container");
                el.onscroll = function (e) {
                    var tempTop = el.scrollTop;
                    var tempLeft = el.scrollLeft;            
                    if (left != tempLeft) {
                        left = tempLeft;
                        $(".locked").css("left", tempLeft + "px");
                    }
                }
				IniEvent();//选中行高亮显示


function IniEvent() {
  var tbl = document.getElementById("UE_table");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
	  if(i!=0){
		  trs[i].onclick = TrOnClick;
	  }
  }
}
function TrOnClick() {
  var tbl = document.getElementById("UE_table");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {		 
	 if (trs[i] == this) { //判断是不是当前选择的行
	   trs[i].style.background = "#E9F9FF";
	   trs[i].children[0].style.background = "#E9F9FF";
	 }
	 else {
	   trs[i].style.background = "white";
	   trs[i].children[0].style.background = "white";
	 }
  }
}

猜你喜欢

转载自blog.csdn.net/wangqingqing_/article/details/81703262
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022