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";
}
}
}