让原生table的tbody达到一定的高度显示滚动条,并修改滚动条的默认样式

效果图:
在这里插入图片描述

HTML:

<table class="coupon-table" cellspacing="0">
    <thead class="coupon-thead">
        <tr>
            <th>券种类th>
            <th>优惠券链接th>
            <th>券消费限额th>
            <th>券面额th>
            <th>券总数th>
            <th>券剩余数th>
            <th>券领取数th>
            <th>领取时间th>
            <th>生效时间th>
        tr>
    thead>
    <tbody class="coupon-tbody">
        <tr>
            <td>1111td>
            <td>2222td>
            <td>3333td>
            <td>4444td>
            <td>5555td>
            <td>6666td>
            <td>7777td>
            <td>8888td>
            <td>9999td>
        tr>
        <tr>
            <td>1111td>
            <td>2222td>
            <td>3333td>
            <td>4444td>
            <td>5555td>
            <td>6666td>
            <td>7777td>
            <td>8888td>
            <td>9999td>
        tr>
    tbody>
table>

tbody显示滚动条的主要CSS(当然还要调一下样式表格才更好看):

.coupon-table {
     
    width: 100%;
}
.coupon-thead {
     
    width: 100%;
    display: inline-block;
}
.coupon-tbody {
     
    width: 100%;
    max-height: 60px;
    display: inline-block;
    overflow-y: auto;
}

修改滚动条的默认样式:

/* 滚动条宽度 */
.coupon-tbody::-webkit-scrollbar {
     
    width: 5px;
}
/* 滚动条背景色和圆角 */
.coupon-tbody::-webkit-scrollbar-thumb {
     
    background-color: #90A7FA;
    border-radius: 2px;
}
/* 滚动轨道背景色 */
.coupon-tbody::-webkit-scrollbar-track {
     
    background-color: #eee;
}

你可能感兴趣的:(HTML/CSS)