angular 中ng-table中表头固定，内容竖向滑动

最新推荐文章于 2024-08-25 09:49:10 发布

cbeid

最新推荐文章于 2024-08-25 09:49:10 发布

阅读量2.2k

点赞数 1

分类专栏： angularJs

angularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

样式部分表头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');
                                }