.djxxTable {
    width: 100%;
    height: 100%;
    background: #fff;
    color: #333;

    .tableBox {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        height: 100%;

        .title {
            width: 100%;
            font-weight: 700;
            font-size: 16px;
            text-align: center;
            background: #e9e9e9;
            height: 62px;
            line-height: 62px;
            position: relative;
            margin: 0 3px;

            .checkbox {
                position: absolute;
                right: 20px;
                bottom: -16px;
                height: 62px;
            }
        }

        .xxTableBox {
            overflow: scroll;
            width: 100%;
        }

        .xxTable>tr:first-child th {
            width: 140px;
        }

        .xxTable {
            //border-spacing: 1px;
            width: 100%;
            border-collapse: collapse;
            // table-layout: fixed;

            tr {
                box-sizing: border-box;
            }

            tr>th {
                border: 1px solid #ccc;
                background: #F2F2F2;
                color: #333333;
                font-size: 16px;
                height: 40px;
            }

            tr:nth-child(1) {
                position: sticky;
                top: 0px;
                z-index: 3;
                margin-top: -2px;

                &:after {
                    content: "";
                    display: inline-block;
                    width: 100%;
                    height: 2px;
                    background-color: rgb(227, 226, 226);
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    z-index: 3;
                }
            }

            tr:nth-child(2) {
                position: sticky;
                top: 40px;
                z-index: 3;

                &:after {
                    content: "";
                    display: inline-block;
                    width: 100%;
                    height: 2px;
                    background-color: rgb(227, 226, 226);
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    z-index: 3;
                }
            }

            tr:nth-child(3) {
                position: sticky;
                top: 80px;
                z-index: 3;
                box-shadow: 0px 15px 10px -15px #409EFF;
            }

            tr td:first-child {
                position: sticky;
                left: 0;
                z-index: 2;
                margin-left: -2px;
                width: 200px;

                &:before {
                    content: "";
                    display: inline-block;
                    width: 2px;
                    height: 43px;
                    background-color: #e3e2e2;
                    position: absolute;
                    top: 0;
                    left: -2px;
                    z-index: 3;
                }

                &:after {
                    content: "";
                    display: inline-block;
                    width: 2px;
                    height: 43px;
                    background-color: #e3e2e2;
                    position: absolute;
                    top: 0;
                    right: -2px;
                    z-index: 3;
                }
            }

            th.linshi,
            th.xianshi {
                background: #464c5b;
            }

            th.lishi {
                background: rgba(70, 76, 91, 0.8);
            }

            .one th {
                height: 25px;
                font-size: 15px;
            }

            th.linshi {
                color: #ff5100;
            }

            .two th {
                height: 45px;

                p:nth-child(2) {
                    font-size: 15px;
                }
            }

            .linshiIcon {
                position: relative;

                .icon {
                    position: absolute;
                    top: 12px;
                    right: -5px;
                    transform: rotate(45deg);
                    color: #fff;
                    font-size: 12px;
                    z-index: 10;
                }
            }

            .linshiIcon::after {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-width: 0px 0px 55px 55px;
                border-style: none solid solid;
                border-color: transparent transparent #ff5100;
                position: absolute;
                top: 0;
                right: 0;
                transform: rotate(-90deg);
            }

            .xianshiIcon {
                position: relative;

                .icon {
                    position: absolute;
                    top: 9px;
                    right: 5px;
                    transform: rotate(45deg);
                    color: #fff;
                    font-size: 12px;
                    z-index: 10;
                }
            }

            .xianshiIcon::after {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-width: 0px 0px 55px 55px;
                border-style: none solid solid;
                border-color: transparent transparent #67C23A;
                position: absolute;
                top: 0;
                right: 0;
                transform: rotate(-90deg);
            }



            tr {
                // display: flex;
            }

            tr td {
                border: 2px solid rgb(227, 226, 226);
                text-align: center;
                height: 40px;
                font-size: 14px;
                width: 140px;
                // flex: 1;
                width: 100%;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                min-width: 340px;
                z-index: 1;
            }

            td:first-child {
                flex: inherit !important;
                width:180px !important;
            }

            >tr:nth-child(odd) td {
                background: #f2f2f2;
            }

            >tr:nth-child(even) td {
                background: #f9f9f9;
            }

            td.linshi {
                color: #ff5100;
            }

            tr>td.lishi {
                color: #7f7f7f;
            }
        }

        .rollTable {
            margin-top: -2px;
            display: block;
            height: 100%;
            // height: calc(100vh - 185px);
            overflow-y: scroll;
            margin-left: 2px;
        }
    }
}