Table固定列,其余列可水平滚动
2020-08-28 本文已影响0人
EverglowLyu
table.jpg
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table100 ver1">
<div class="table100-firstcol">
<table cellspacing="0">
<thead>
<tr class="row100 head">
<th class="column1">全选</th>
<th class="column1">姓名</th>
<th class="column1">电话</th>
<th class="column1">线索状态</th>
<th class="column1">所属客服</th>
<th class="column1">操作</th>
</tr>
</thead>
<tbody>
<tr class="row100 body">
<td class="column1"><input type="checkbox" name="checkbox1"></td>
<td class="column1"><span class="limiterName">张三</span></td>
<td class="column1"><span class="limiterTel">15999559565</span></td>
<td class="column1"><span class="limiterChangeOver">已转客</span></td>
<td class="column1"><span class="limiterService">客服22222222客服22222222客服22222222</span></td>
<td class="column1"><b class="messDetailsBtn">查看详情</b><b class="messAmendBtn">分配</b></td>
</tr>
<tr class="row100 body">
<td class="column1"><input type="checkbox" name="checkbox1"></td>
<td class="column1"><span class="limiterName">张三</span></td>
<td class="column1"><span class="limiterTel">15999559565</span></td>
<td class="column1"><span class="limiterChangeOver">已转客</span></td>
<td class="column1"><span class="limiterService">客服22222222客服22222222客服22222222</span></td>
<td class="column1"><b class="messDetailsBtn">查看详情</b><b class="messAmendBtn">分配</b></td>
</tr>
</tbody>
</table>
</div>
<div class="wrap-table100-nextcols js-pscroll">
<div class="table100-nextcols">
<table cellspacing="0">
<thead>
<tr class="row100 head">
<th class="column1"><span>标签</span></th>
<th class="column1"><span>线索类型</span></th>
<th class="column1"><span>线索来源</span></th>
<th class="column1"><span>落地页链接</span></th>
<th class="column1"><span>创建时间</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
</tr>
</thead>
<tbody>
<tr class="row100 body">
<th class="column1"><span>标签</span></th>
<th class="column1"><span>线索类型</span></th>
<th class="column1"><span>线索来源</span></th>
<th class="column1"><span>落地页链接</span></th>
<th class="column1"><span>创建时间</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
</tr>
<tr class="row100 body">
<th class="column1"><span>标签</span></th>
<th class="column1"><span>线索类型</span></th>
<th class="column1"><span>线索来源</span></th>
<th class="column1"><span>落地页链接</span></th>
<th class="column1"><span>创建时间</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
<th class="column1"><span>省份</span></th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
.limiter {
width: 100%;
margin: 0 auto;
color: #8f9ba9;
height: calc(100vh - 210px);
overflow: hidden;
overflow-y: scroll;
}
.container-table100 {
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.wrap-table100 {
width: 100%;
}
.table100 {
background-color: #fff;
}
table {
width: 100%;
}
th {
text-align: left;
padding-right: 10px;
width: 200px;
}
td {
font-weight: unset;
padding-right: 10px;
}
.column1:first-child {
width: 30px !important;
}
.column1:last-child {
width: 130px !important;
}
.table100 {
width: 100%;
position: relative;
}
.table100-firstcol {
background-color: #fff;
position: absolute;
z-index: 1000;
width: 780px;
top: 0;
left: 0;
box-shadow: 9px 0px 4px -6px rgba(0, 0, 0, 0.08);
}
.table100-firstcol table {
background-color: #fff;
}
.wrap-table100-nextcols {
overflow: auto;
padding-left: 782px;
}
.table100-nextcols table {
table-layout: fixed;
}
.shadow-table100-firstcol {
box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
-o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
}
.table100-firstcol table {
background-color: transparent;
}
.table100.ver1 th {
white-space: nowrap;
font-size: 14px;
color: #8f9ba9;
line-height: 1.4;
height: 45px;
border-bottom: 1px solid #ebecf0;
padding-left: 30px;
font-weight: normal;
text-overflow: ellipsis;
overflow: hidden;
width: 100px;
}
.table100.ver1 td {
white-space: nowrap;
height: 45px;
border-bottom: 1px solid #ebecf0;
padding-left: 30px;
}
.table100.ver1 .table100-firstcol td {
color: #8f9ba9;
}
.table100.ver1 .table100-nextcols td {
color: #8f9ba9;
}
.table100.ver1 tr {
border-bottom: 1px solid #f2f2f2;
background: #fff;
}
.limiterName,
.limiterTel,
.limiterChangeOver,
.limiterService,
.column1 span {
text-overflow: ellipsis;
overflow: hidden;
width: 100px;
white-space: nowrap;
display: block;
}
