修改滚动条的样式

最新推荐文章于 2024-08-23 13:45:37 发布

zhaoyifei01

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量56

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/zhaoyifei01/article/details/130197916

版权

 <div class="tableList" id="tableListStyle">
          <el-table
            class="customer-table"
            border
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{
              fontSize: '16px',
              background:
                'linear-gradient(to bottom, #1c3665, #0d1937, #1c3665)',
              color: '#3c98cf',

              borderColor: '#1f283e',
            }"
            :cell-style="{ borderColor: '#1f2e4c' }"   //设置里面边框的颜色
          >
            <el-table-column prop="road" label="路段1" width="180">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="150">
            </el-table-column>
            ......
        </div>

css

	  .tableList {
        height: 700px;
        overflow-y: scroll;
        padding: 0 8px;
      }
      // 滚动条整体样式
      .tableList::-webkit-scrollbar {
        width: 10px;
        /*height: 4px;*/
      }
      // 定义滑块颜色、内阴影及圆角
      .tableList::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #36b3cd;
      }
      //滑动槽的背景颜色
      .tableList::-webkit-scrollbar-track-piece {
        background-color: #142a37;
      }