iview table 背景与滚动条样式调整

1、template模板中引用table组件，代码如下：

<template>
    <div>
        <Table 
            border 
            ref="selection" 
            :height="400"
            :columns="columns4" 
            :data="data1"
            class="table-css">
        </Table>
    </div>
</template>

2、style(scoped)样式表中修改表格样式，代码如下：

<style scoped>
    /* 表格样式 */
    .table-css >>> .ivu-table {
        color: #409EFF;
        background-image:url('../../../assets/images/login-bg.jpg');
        background-size: 100% 100%;
    }
    .table-css >>> .ivu-table th {
        border-bottom: 1px solid #000;
        border-right: 0px;
        background-color: transparent;
    }
    .table-css >>> .ivu-table td {
        border-bottom: 1px solid #000;
        border-right: 0px;
        background-color: transparent;
    }
    .table-css >>> .ivu-checkbox-inner{
        background-color: #111C49;
        border: 1px solid #409EFF;
    }
    .table-css >>> .ivu-checkbox-checked .ivu-checkbox-inner:after {
        border-right-color: #409EFF;
        border-bottom-color: #409EFF;
    }

    /* 滚动条 */
    .table-css >>> .ivu-table-overflowY::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    .table-css >>> .ivu-table-overflowY::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: red;
    }
    .table-css >>> .ivu-table-overflowY::-webkit-scrollbar-track {
        background: #111C49;
    }
    .table-css >>> .ivu-table-overflowY::-webkit-scrollbar-corner {
        background-color: #111C49;
    }
    .table-css >>> .ivu-table-overflowX::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    .table-css >>> .ivu-table-overflowX::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: red;
    }
    .table-css >>> .ivu-table-overflowX::-webkit-scrollbar-track {
        background: #111C49;
    }
    .table-css >>> .ivu-table-overflowX::-webkit-scrollbar-corner {
        background-color: #111C49;
    }
</style>

3、效果图如下：