记录多头表头的表格

*初级小白*~

已于 2022-09-29 14:03:49 修改

阅读量187

点赞数

分类专栏：项目实战遇到的问题 HTML 文章标签：前端

于 2022-09-07 11:26:41 首次发布

本文链接：https://blog.csdn.net/ScumStudy/article/details/126742146

版权

本文探讨了如何在前端开发中处理多头表头的表格，详细介绍了实现这种复杂表格布局的方法，包括使用HTML、CSS和JavaScript的技巧，以及如何确保数据的可维护性和用户体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<body>
    <table id="tab" cellpadding="1" cellspacing="1" border="1">
        <tr>
            <th rowspan="3">序号</th>
            <th rowspan="3">监测位置</th>
            <th rowspan="3">供电通路</th>
            <th rowspan="3">供电电压</th>
            <th rowspan="3">负载电流</th>
            <th rowspan="3">雷击次数</th>
            <th rowspan="3">最近一次雷击时间</th>
            <th colspan="3">后备保护空开状态</th>
            <th rowspan="3">SPD损害数量</th>
            <th colspan="3">输出空开状态</th>
        </tr>
        <tr>
            <th>B级</th>
            <th>C级</th>
            <th>1路</th>
            <th>2路</th>
        </tr>
        <tr>
            <th>B级</th>
            <th>C级</th>
            <th>1路</th>
            <th>2路</th>
        </tr>
        <tr>
            <td rowspan="4">1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>78</td>
            <td>96</td>
            <td>67</td>
            <td>98</td>
            <td>88</td>
            <td>75</td>
            <td>94</td>
            <td>69</td>
            <td>23 </td>
            <td>33 </td>
        </tr>
        <tr>
            <td colspan="2">提示建议</td>
            <td colspan="2">智能防雷箱状态</td>
            <td colspan="2">防雷箱型号</td>
            <td colspan="3">防雷箱序列号</td>
            <td colspan="2">防雷箱版本</td>
        </tr>
        <tr>
            <td colspan="2">建议整机按规程检测</td>
            <td colspan="2">在线</td>
            <td colspan="2">2018041201-035PF</td>
            <td colspan="3">2018041201-256</td>
            <td colspan="2">V1.0.0</td>
        </tr>
    </table>

    <table border="1px" cellspacing="0" cellpadding="15px">
        <thead>
            <tr>
                <th rowspan="2">1</th>
                <th rowspan="