<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#scroll {
/* max-height: 100%; */
max-width: 800px;
height: 200px;
overflow: auto;
white-space: nowrap;
/* width: inherit; */
}
span {
width: 200px;
height: 100px;
display: inline-block;
/* background-color: rgb(82, 182, 182); */
vertical-align: middle;
border: solid 2px green;
}
.new_tr {
/* border: solid 4px red; */
/* width: 145px; */
height: 100px;
width: auto;
display: block;
}
span:nth-child(1) {
position: sticky;
left: 0;
z-index: 1;
background-color: lightpink;
}
.new_title {
position: sticky;
top: 0;
/* 第一列最上 */
width: auto;
}
</style>
<div class="scroll" id="scroll">
<div class="new_title new_tr">
<span>表头1</span>
<span>表头2</span>
<span>表头3</span>
<span>表头4</span>
<span>表头5</span>
</div>
<div class="new_tr">
<span>1</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>2</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>3</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>4</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>5</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>6</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>7</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>我的高度不固定我</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>8</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="new_tr">
<span>9</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>div fixed row fixed column
Guess you like
Origin blog.csdn.net/qq_51389137/article/details/132888875
Recommended
Ranking