css实现table最后两列固定

林卤蛋

于 2023-02-20 16:10:38 发布

阅读量750

点赞数

分类专栏：技术文档文章标签： css 前端 html

本文链接：https://blog.csdn.net/ARLENE2/article/details/129126334

版权

技术文档专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
    }