<div class="table-layer">
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr style="background: #F5F5F5; top: 0;z-index: 12;">
<td class="table-name">
<div>姓名</div>
</td>
<td class="table-con">
<div>姓名</div>
</td>
<td class="table-con">
<div>姓名</div>
</td>
<td class="table-con">
<div>姓名</div>
</td>
<td class="table-con">
<div>姓名</div>
</td>
<td class="table-con">
<div>姓名</div>
</td>
</tr>
</thead>
<tr>
<td class="table-name">
<div>姓名</div>
</td>
<td class="table-con">
<div>鹏仔QQ344225443</div>
</td>
<td class="table-con">
<div>鹏仔微信15129739599</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
</tr>
<tr>
<td class="table-name">
<div>姓名</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
</tr>
<tr>
<td class="table-name">
<div>姓名</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
</tr>
<tr>
<td class="table-name">
<div>姓名</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
</tr>
<tr>
<td class="table-name">
<div>姓名</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
<td class="table-con">
<div>鹏仔</div>
</td>
</tr>
</table>
</div>
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input {
margin: 0;
padding: 0;
}
body,html {
width: 100%;
min-height: 100%;
}
.table-layer{
width: 600px;
max-height: 200px;
overflow: scroll;
background: rgba(0,0,0,.1);
}
table thead tr{
position: sticky;
top: 0;
z-index: 10;
}
.table-name{
background: #F5F5F5;
position: sticky;
left: 0px;
z-index: 11;
}
.table-name div{
width: 128px;
padding: 12px 8px;
box-sizing: border-box;
text-align: center;
}
.table-con{
min-width: 240px;
padding: 12px 8px;
box-sizing: border-box;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.