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

为君一笑 提交于 2020-02-14 23:22:59

常用,记录一下。

在这里插入图片描述
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
                        }
                    }

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!