原生table标签实现多层嵌套表格

1,640 阅读2分钟

<div style="width: 100%;">

    <table id="table1">
        <tbody>
        <tr>
            <th style="width: 20%;">指标要求</th>
            <th style="width: 25%;">落实措施</th>
            <th style="width: 15%;">核查方法</th>
            <th style="width: 5%;">落实情况</th>
            <th style="width: 12%;">备注</th>
            <th style="width: 5%;">权重</th>
            <th style="width: 6%;">更新人</th>
            <th style="width: 9%;">更新时间</th>
            <th style="width: 3%;">操作</th>
        </tr>

        <tr>
            <td style="width: 20%;text-align: left;">
                党组(党委)主要负责同志履行网络安全第一责任人责任,分管网络安全工作的党组(党委)成员履行网络安全直接责任人责任,将网络安全工作纳入重要议事日程。
            </td>
            <td colspan="8">
                <table class="table2">
                    <tbody>
                    <tr>
                        <td style="width: 25%;text-align: left;">
                            4)通过“三定”方案或制度文件明确网络安全工作机构及具体职责,并按照岗位实际配备网络安全工作人员。
                        </td>
                        <td style="width: 15%;">测试导入</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">测试导入</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;"></td>
                        <td style="width: 9%;"></td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(331)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">
                            5)网络安全工作机构综合协调、指导监管职责覆盖所有与信息化相关的部门、单位,覆盖所有网络和信息系统(简称“两个全覆盖”)。
                        </td>
                        <td style="width: 15%;"></td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;"></td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;"></td>
                        <td style="width: 9%;"></td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(322)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">
                            4)通过“三定”方案或制度文件明确网络安全工作机构及具体职责,并按照岗位实际配备网络安全工作人员。
                        </td>
                        <td style="width: 15%;">测试导入</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">测试导入</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;"></td>
                        <td style="width: 9%;"></td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(332)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">
                            1)通过文件或会议纪要明确党组(党委)领导班子成员中分管网络安全的同志;分管网络安全的班子成员变动后,在1个月内以文件或会议纪要方式明确变更情况(备注1)。
                        </td>
                        <td style="width: 15%;">沪电股份的非官方的非官方的风格大声道</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">夫婿给现场VB分享下厨房</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;">sysadmin</td>
                        <td style="width: 9%;">2020-08-10 16:46:14</td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(155)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">
                            2)党组(党委)领导班子主要负责人至少每年召集一次专题会议,会议议题应包含“组织听取本单位(备注2)网络安全工作整体情况汇报,研究议定重大事项、加强网络安全工作的措施和人力物力财力保障”等内容。
                        </td>
                        <td style="width: 15%;">阿斯顿发斯蒂芬</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">水电费</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;">sysadmin</td>
                        <td style="width: 9%;">2020-08-10 16:46:14</td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(156)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">
                            3)分管网络安全工作的党组(党委)成员每季度召集一次网络安全工作会议,听取本单位网络安全相关情况、研究网络安全工作。
                        </td>
                        <td style="width: 15%;">阿斯顿发斯蒂芬</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">才下班VB</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;">sysadmin</td>
                        <td style="width: 9%;">2020-08-10 16:46:14</td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(157)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">163</td>
                        <td style="width: 15%;"></td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;"></td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;"></td>
                        <td style="width: 9%;"></td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(321)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">测试添加</td>
                        <td style="width: 15%;">测试添加</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">测试添加sdfgsdfg</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;">sysadmin</td>
                        <td style="width: 9%;">2020-08-10 16:46:14</td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(312)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">测试添加</td>
                        <td style="width: 15%;">测试添加</td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;">测试添加</td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;">sysadmin</td>
                        <td style="width: 9%;">2020-08-10 16:46:14</td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(313)"></span></td>
                    </tr>
                    <tr>
                        <td style="width: 25%;text-align: left;">resfsdfasdffdssdf</td>
                        <td style="width: 15%;"></td>
                        <td style="width: 5%;">已落实</td>
                        <td style="width: 12%;"></td>
                        <td style="width: 5%;">1.0</td>
                        <td style="width: 6%;">sysadmin</td>
                        <td style="width: 9%;">2020-08-10 16:46:14</td>
                        <td style="width: 3%;"><span class="glyphicon glyphicon-pencil operation-icon" title="修改"
                                                     onclick="doUpdWork(320)"></span></td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
       
        </tbody>
    </table>
</div>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        font-size: 16px;
    }

    table th, td {
        border: 1px solid #999;
        text-align: center;
    }

    .table2 tr td:nth-child(1) {
        border-left: 0;
    }

    .table2 tr:nth-child(1) td {
        border-top: 0;
    }

    .table2 tr:nth-child(1) td {
        border-right: 0;
    }

    .table2 tr:nth-last-child(1) > td {
        border-bottom: 0;
        border-right: 0;
    }

    .table2 > tbody > tr > td:nth-last-child(1) {
        border-right: 0;
    }

    .contentQueryClass {
        background-color: #d6db35;
    }
</style>

初学前段,记录一下...