js实现table嵌套的简单应用

最新推荐文章于 2024-04-19 05:41:57 发布

Master.Yuan

最新推荐文章于 2024-04-19 05:41:57 发布

阅读量1.4k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/yuanwen52/article/details/105637013

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，我们需要实现的效果图如下：

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{  text-align:center;border-collapse: collapse; padding:0; margin:0; }
        .outTable{width: 100%;height: auto;}
        .inTable{ width:100%; height:100%;}
        .outTable td{border: 1px solid #ccc;}
        .div{ width:50%; height:auto;}
    </style>
</head>
<body>
<div class="div">
    <table class="outTable">
        <thead>
        <tr>
            <td colspan="8">全省资金情况</td>
        </tr>
        <tr>
            <td width="12%" >类型</td>
            <td width="16%">种类</td>
            <td width="12%">金额</td>
            <td width="12%">笔数</td>
            <td width="12%">占比</td>
            <td width="12%">同比</td>
            <td width="12%">环比</td>
            <td width="12%">年初比</td>
        </tr>
        </thead>
        <tbody >
        <tr>
            <td >表内资金</td>
            <td colspan="7">
                <table  frame="void" class="inTable">
                    <tr>
                        <td width="16%">种类1</td>
                        <td width="12%">金额1</td>
                        <td width="12%">笔数1</td>
                        <td width="12%">占比1</td>
                        <td width="12%">同比1</td>
                        <td width="12%">环比1</td>
                        <td width="12%">年初比1</td>
                    </tr>
                    <tr>
                        <td width="16%">种类2</td>
                        <td width="12%">金额2</td>
                        <td width="12%">笔数2</td>
                        <td width="12%">占比2</td>
                        <td width="12%">同比2</td>
                        <td width="12%">环比2</td>
                        <td width="12%">年初比2</td>
                    </tr>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</body>
<script>
    for(var i=0;i<10;i++){
        (function (a) {
            setTimeout(function(){
                console.log(a);
            },1000);
        })(i);
    }
</script>
</html>

Master.Yuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现table嵌套的简单应用

首先，我们需要实现的效果图如下：附上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> table{ text-align:cent...
复制链接

扫一扫