css表格优化排版

作者：Jasmine - 2019年08月21日

css美化表格常用技巧。等比、定宽、错色等。

html:

<table>
    <colgroup>
        <col span="3">
        <col style="width: 300px;">
    </colgroup>
    <tr>
        <th>等级</th>
        <th>掘力值</th>
        <th>身份</th>
        <th>权限</th>
    </tr>
    <tr>
        <td>Lv3</td>
        <td>1000</td>
        <td>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</td>
        <td>开发中</td>
    </tr>
    <tr>
        <td>Lv4</td>
        <td>5000</td>
        <td>掘金优秀作者</td>
        <td>开发中开发中开发中开发中开发中开发中开发中开发中...</td>
    </tr>
    <tr>
        <td>Lv5</td>
        <td>10000</td>
        <td></td>
        <td>开发中</td>
    </tr>
    <tr>
        <td>Lv6</td>
        <td>20000</td>
        <td>掘金优秀作者</td>
        <td>开发中</td>
    </tr>
</table>

css:

table,tr,th,td{ border:1px solid #ccc;}
table{
    width:100%;
    border-collapse: collapse;
    font-size:14px;
    color: #333;
    table-layout:fixed;
}
th,td{ padding:6px 12px;}

tr:nth-child(odd){
    background: aliceblue;
}
tr:hover{background: lightpink;}
tr{transition: background 1s;}

效果展示：

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/635

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！