HTML之表格篇-表格嵌套表格

最新推荐文章于 2024-06-14 12:29:52 发布

苦心明

最新推荐文章于 2024-06-14 12:29:52 发布

阅读量8.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/if_smile/article/details/84933976

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

嵌套表格一：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
        }
        .zi{
            background-color: red;
        }
    </style>
    <script src="resources/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function showZi(e) {
            $(e).next().toggle();
        }
    </script>

</head>
<!-- colspan 横跨-->
<!-- rowspan 竖跨-->
<body>

<table>
    <tr onclick="showZi(this)">
        <td>主</td>
        <td>主</td>
        <td>主</td>
        <td>主</td>
    </tr>
    <tr>
        <td class="zi"  colspan="4">
            <table>
                <tr>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                </tr>
            </table>
        </td>
    </tr>

    <tr onclick="showZi(this)">
        <td>主</td>
        <td>主</td>
        <td>主</td>
        <td>主</td>
    </tr>
    <tr>
        <td  class="zi" colspan="4">
            <table>
                <tr>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                </tr>
            </table>
        </td>
    </tr>


    <tr onclick="showZi(this)">
        <td>主</td>
        <td>主</td>
        <td>主</td>
        <td>主</td>
    </tr>
    <tr>
        <td  class="zi" colspan="4">
            <table>
                <tr>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                    <td>子</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

苦心明

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
HTML之表格篇-表格嵌套表格

嵌套表格一：效果如图所示代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; tabl
复制链接

扫一扫

专栏目录