样式部分 表头absolute定位,body设置竖向scroll 且设置最大高度
.table-scrollable {
overflow: visible;
}
.table > tbody > tr > td {
text-align: center;
vertical-align: middle;
}
.table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
max-width: inherit;
}
.table-scroll thead {
position: absolute;
margin-right: 15px;
background-color:white;
}
.table-scroll {
overflow-y: auto;
max-height: 182px;
display: block;
}
.table-scroll tbody {
padding-top: 30px;
display: block;
width: 100%;
table-layout: fixed;
}
.marginRigt {
margin-right:33px !important;
}
.table-scroll tr {
display: table;
table-layout: fixed;
width: 100%;
}
.table-scroll thead tr td {
border-bottom: 1px solid #e7ecf1;
}
.table-scroll tbody tr td {
border-bottom:0px;
}
.table-scroll {
border-left: 0px;
border-right: 0px;
}
.table-scroll td {
height: 30px;
}
html部分 table的class中添加类table-scroll
<table ng-table="vm.chufangliebiaoTable" render-finish class="table-scroll chufangliebiaoTable chufang table table-striped table-condensed table-bordered table-responsive table-hover order-column ws-nowrap">
<tr ng-repeat="item in $data" ng-click="vm.chufangClick($index, item.prescriptionNo, item.id )">
<td class="text-center " data-title="'姓名'" sortable="'patientName'">{{item.patientName}}</td>
<td class="text-center " data-title="'处方日期'" sortable="'createdDate'">{{item.createdDate | date:'yyyy-MM-dd' }}</td>
<td class="text-center " data-title="'类型'" sortable="'prescriptionTypeName'">{{item.prescriptionTypeName}}</td>
<td class="text-center " data-title="'处方号'" sortable="'prescriptionNo'">{{item.prescriptionNo}}</td>
<td class="text-center " data-title="'开立医生'" sortable="'doctorName'">{{item.doctorName}}</td>
<td class="text-center " data-title="'诊断'" sortable="'diagnosis'">{{item.diagnosis}}</td>
</tr>
</table>
js部分 对head部分的样式调整,我这边是超过五行,head右边留出滑块的位置
if (response.data.data.length > 5) {
$(".getProjectTable thead").addClass('marginRigt');
} else
{
$(".getProjectTable thead").removeClass('marginRigt');
}