css实现table最后两列固定

css实现table最后两列固定

实现方法： postion：sticky（粘性定位）

table {
    
    
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #DDDDDD;
    }

    /* 表头固定 */
    thead tr th {
    
    
        position: sticky;
        top: 0;
        background: #F4F4F5;
        height: 30px;
    }

    /* 最后两列固定*/
    th:last-child,
    th:nth-last-child(2),
    td:last-child,
    td:nth-last-child(2) {
    
    
        position: sticky;
        left: 0;
        background: #F4F4F5;
        text-align: center;
        right: 0px;
        border-left: 1px solid #DDDDDD;
    }

    th:nth-last-child(2),
    td:nth-last-child(2) {
    
    
        right: 238px;  /*根据倒数第二列离右边多少宽度而定 
    }

    /* 最后两列强制最顶层 */
    th:last-child,
    th:nth-last-child(2) {
    
    
        z-index: 3;
        /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
    }