Html,CSS表格(table)隔行换色,自动适应宽度

效果图


核心代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格隔行换色</title>
    <style type="text/css">
        tr {
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="tab" align="center" border="1" width="100%" style="border-collapse: collapse;">
        <thead>
            <tr>
                <th>编号</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码办公</td>
                <td><button type="button">修改</button> <button type="button">删除</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>手机数码</td>
                <td>手机数码办公</td>
                <td><button type="button">修改</button> <button type="button">删除</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>手机数码</td>
                <td>手机数码办公</td>
                <td><button type="button">修改</button> <button type="button">删除</button></td>
            </tr>
            <tr>
                <td>4</td>
                <td>手机数码</td>
                <td>手机数码办公</td>
                <td><button type="button">修改</button> <button type="button">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br />  <br />  <br />  <br />  <br />  <br />
                                            <h3>更多有趣的源码请访问 www.luofenming.com</h3>
    <script src="./jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        $(function () {
            $("thead tr").css("background-color", "navajowhite");
            $("tbody tr:even").css("background-color", "pink");
            $("tbody tr:odd").css("background-color", "skyblue");
        })
    </script>
</body>
</html>


评论

  1. 211.97.116.*2021-11-28 17:01:31
    Good~