表格 滚动条 (tbody部分滚动)

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记

html

<table>
    <thead>
        <tr>
            <th>开始年</th>
            <th>年效</th>
            <th>分享比例</th>
            <th>补贴电价</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2018</td>
            <td>5</td>
            <td>5：9</td>
            <td>补贴电价</td>
        </tr>
        <tr>
            <td>2018</td>
            <td>5</td>
            <td>5：9</td>
            <td>补贴电价</td>
        </tr>
        <tr>
            <td>2018</td>
            <td>5</td>
            <td>5：9</td>
            <td>补贴电价</td>
        </tr>
        <tr>
            <td>2018</td>
            <td>5</td>
            <td>5：9</td>
            <td>补贴电价</td>
        </tr>
    </tbody>
</table>

css

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    tr {
        height: 0.44rem;
        td,th {
            width: 1rem;
        }
    }
    thead {
        display: block;
        width: 100%;
        tr {
            background: #519FF1;
            font-size: 0.15rem;
            color: #FFFFFF;
            th {
                font-weight: normal;
            }
        }
    }
    tbody {
        display: block;
        width: 100%;
        height: 1.32rem;
        overflow: auto;
        tr:nth-child(odd) {
            background: #FFFFFF;
        }
        tr:nth-child(even) {
            background: #DCECFC;
        }
    }
}