CSS统计数据记录数量

最新推荐文章于 2024-06-04 14:11:13 发布

礁岸

最新推荐文章于 2024-06-04 14:11:13 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_39121810/article/details/105901704

版权

css 专栏收录该内容

3 篇文章

订阅专栏

CSS统计数据记录数量

前几天导师出了个题让我统计元素的数量。遂写下分享。

效果

代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <link rel="stylesheet" href="../m-css/m-css-1.css">
    <link rel="stylesheet" href="../m-css/m-css-2.css">
    <link rel="stylesheet" href="../m-css/m-css-3.css">
    <style>
        /*table-base*/
        
        table.m-table-count {
            border-collapse: collapse;
        }
        
        table.m-table-count th,
        table.m-table-count td {
            padding: .75rem;
        }
        
        table.m-table-count {
            counter-reset: section;
            --d: counter(section);
        }
        
        table.m-table-count tbody tr {
            counter-increment: section;
        }
        
        table.m-table-count tfoot span:after {
            content: var(--d)
        }
    </style>
</head>

<body>
    <div id="table-1">
        <table class="m-table-count">
            <caption>计数表格</caption>
            <thead>
                <th>姓名</th>
                <th>地址</th>
                <th>年龄</th>
                <th>电话</th>
                <th>专业</th>
                <th>时间</th>
            </thead>
            <tbody>
                <tr>
                    <td>m-</td>
                    <td>成都市高新区</td>
                    <td>22</td>
                    <td>18488043509</td>
                    <td>web前端</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>jan</td>
                    <td>成都市高新区</td>
                    <td>22</td>
                    <td>18488043709</td>
                    <td>web前端</td>
                    <td>2030</td>
                </tr>
                <tr>
                    <td>jan</td>
                    <td>成都市高新区</td>
                    <td>22</td>
                    <td>18488043709</td>
                    <td>web前端</td>
                    <td>2030</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>共<span></span>条数据</td>

                </tr>

            </tfoot>
        </table>

    </div>
</body>

</html>