css改变滚动条样式和简单的table样式

常用,记录一下。

在这里插入图片描述
css修改滚动条样式:

    /*滚动条的宽度*/
    ::-webkit-scrollbar {
        width: 6px;
    }

     //滚动条轨道的颜色
    ::-webkit-scrollbar-track {
        /*background black*/
        border-radius: 5px;
    }

     //滚动条的颜色
    ::-webkit-scrollbar-thumb {
        background: #B5B5B5;
        border-radius: 5px;
    }

    //鼠标经过滚动条时的颜色
    ::-webkit-scrollbar-thumb:hover {
        background: #dad6bf;
    }

简单的隔行变色表格样式

 					<div class="table-box">
                        <table border="0">
                            <tr class="odd-tr">
                                <th>地区</th>
                                <th>确诊</th>
                                <th>治愈</th>
                                <th>死亡</th>
                            </tr>
                            <tr :class="{'even-tr':index%2==0,'odd-tr':index%2==1}"
                                v-for="(item,index) in tableListData" :key="index">
                                <td v-for="(item2,index) in item" :key="index">{{item2}}</td>
                            </tr>
                            <!--<tr class="odd-tr">-->
                            <!--<td>武汉</td>-->
                            <!--<td>20</td>-->
                            <!--<td>10</td>-->
                            <!--<td>1</td>-->
                            <!--</tr>-->
                        </table>
                    </div>

					//css样式
					.table-box {
						height 100%
                        margin-left 5%
                        width 90%
                        overflow-y auto
                        background #3A3F44
                    }

                    table {
                        border-collapse collapse;
                        color FontColorEee
                        width 100%
                        text-align center

                        th {
                            font-size 14px
                            padding 5px 0
                        }

                        td {
                            font-size 12px
                            padding 5px 0
                        }

                        .odd-tr {
                            background #2E3338
                        }

                        .even-tr {
                            background #3A3F44
                        }
                    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值