.table-fixed {
    overflow-y: auto;
    height: 25rem;
    width: 100%;
}

    .table-fixed table {
        border-collapse: collapse;
    }

        .table-fixed table tbody td, .table-fixed table tbody th {
            vertical-align: middle;
            text-align: center;
        }

/*480x800, 480x854, 540x960, 720x1280, 1080x1920*/
@media screen and (min-width: 320px) and (max-width: 480px) {
    .table-style {
        overflow-y: auto;
        height: 10rem;
        width: 100%;
    }
}


/* 854 ~ 1280 */
@media only screen and (min-width: 481px) and (max-width: 1280px) {
    .table-style {
        overflow-y: auto;
        height: 25rem;
        width: 100%;
    }
}

/* 1920px 至更大 */
@media only screen and (min-width: 1281px) {
    .table-style {
        overflow-y: auto;
        height: 45rem;
        width: 100%;
    }
}

/* 豎屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {
}

/* 橫屏 */
@media screen and (orientation:landscape) {
}

/*.table-style {
    overflow-y: auto;
    max-height: 30rem;
    height: auto;
    min-height: 25rem;
    width: 100%;
}*/

    .table-style table thead th {
        position: sticky;
        top: -1px;
        padding: .25rem 0;
        border: 1px solid #ccc;
        color: #000;
        background-image: linear-gradient(to top, #eee, #fff);
        font-size: .85rem;
        font-weight: normal;
    }

    .table-style table tbody td, .table-style table tbody th {
        margin: 0;
        padding: 0 .5rem;
        font-size: .85rem;
        font-weight: normal;
    }

    .table-style table tbody td, .table-style table thead th {
        vertical-align: middle;
        text-align: center;
    }

    .table-style.thin table tbody td, .table-style.thin table tbody th {
        margin: 0;
        padding: 0;
    }

        .table-style.thin table tbody td input,
        .table-style.thin table tbody td select,
        .table-style.thin table tbody td textarea {
            margin: 0;
            padding: 0 .5rem;
            height: 100%;
            max-width: 100%;
            width: 100%;
            border-style: hidden;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .table-style.thin table tbody td input:focus,
            .table-style.thin table tbody td select:focus,
            .table-style.thin table tbody td textarea:focus {
                outline: none;
            }


    .table-style .form-control {
        height: calc(1em + 0.75rem + 2px) !important;
        font-size: inherit;
        border-radius: 0;
    }

.table-stylee-modal .input-group {
    margin: 0;
    padding: 0;
}

.table-style .input-group >.input-group-append >a {
    /*padding-top: .675rem !important;*/
    height: calc(1em + 0.75rem + 2px) !important;
    padding: .375rem;
    background-color: #d3d9df !important;
    color: #fff;
    font-size: inherit;
    text-decoration: none;
    border-radius: 0;
}

/*.table-style table thead th:nth-child(1),
.table-style table tbody td:nth-child(1), .table-style table tbody th:nth-child(1) {
    max-width: 6rem;
    min-width: 6rem;
    width: 6rem;
}

.table-style table thead th:nth-child(2),
.table-style table tbody td:nth-child(2), .table-style table tbody th:nth-child(2) {
    max-width: 4rem;
    min-width: 4rem;
    width: 4rem;
}

.table-style table thead th:nth-child(2),
.table-style table tbody td:nth-child(2), .table-style table tbody th:nth-child(2) {
    max-width: 4rem;
    min-width: 4rem;
    width: 4rem;
}*/

.table-style td.width-4,
.table-style th.width-4 {
    max-width: 4rem;
    min-width: 4rem;
    width: 4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-6,
.table-style th.width-6 {
    max-width: 6rem;
    min-width: 6rem;
    width: 6rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-8,
.table-style th.width-8 {
    max-width: 8rem;
    min-width: 8rem;
    width: 8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-10,
.table-style th.width-10 {
    max-width: 10rem;
    min-width: 10rem;
    width: 10rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-15,
.table-style th.width-15 {
    max-width: 15rem;
    min-width: 15rem;
    width: 15rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-20,
.table-style th.width-20 {
    max-width: 20rem;
    min-width: 20rem;
    width: 20rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-25,
.table-style th.width-25 {
    max-width: 25rem;
    min-width: 25rem;
    width: 25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-30,
.table-style th.width-30 {
    max-width: 30rem;
    min-width: 30rem;
    width: 30rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-50,
.table-style th.width-50 {
    max-width: 50rem;
    min-width: 50rem;
    width: 50rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-60,
.table-style th.width-60 {
    max-width: 60rem;
    min-width: 60rem;
    width: 60rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style td.width-70,
.table-style th.width-70 {
    max-width: 70rem;
    min-width: 70rem;
    width: 70rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-style table tbody td a[name=edit],
.table-style table tbody td a[name=del],
.table-style table tbody td a[name=reply],
.table-style table tbody td a[name=cog],
.table-style table tbody td a[name=ie],
.table-style table tbody td a[name=card],
.table-style table tbody td a[name=add],
.table-style table tbody td a[name=select] {
    margin: .25rem .1rem;
    padding: 0 .1rem;
    height: 1.2rem;
    width: 1.2rem;
    color: #fff;
    font-size: .7625rem;
}

.table-style table tbody td a[name=edit] {
    border: 1px solid #3e8e41;
    background-color: #4CAF50;
}

.table-style table tbody td a[name=del] {
    border: 1px solid #c00;
    background-color: #f00;
}

.table-style table tbody td a[name=cog] {
    border: 1px solid #ac7339;
    background-color: #cc9966;
}

.table-style table tbody td a[name=reply],
.table-style table tbody td a[name=ie],
.table-style table tbody td a[name=card],
.table-style table tbody td a[name=add],
.table-style table tbody td a[name=select] {
    border: 1px solid #005ce6;
    background-color: #3385ff;
}

.table-style table tbody td a[name=file] {
    border: none;
    margin: 0;
    padding: 0;
    color: #f00;
    font-size: 1.25rem;
}

.table-style table tbody td a[name=edit]:hover,
.table-style table tbody td a[name=del]:hover,
.table-style table tbody td a[name=reply]:hover,
.table-style table tbody td a[name=cog]:hover,
.table-style table tbody td a[name=ie]:hover,
.table-style table tbody td a[name=card]:hover,
.table-style table tbody td a[name=add]:hover,
.table-style table tbody td a[name=select]:hover {
    color: #fff;
}