关于前端:table利用colspan实现跨行table-td实现跨半行

想只用一个 table 实现这样一个表格：

能够看到第二行和第三行的列数是不一样的，通过定义第二行和第三行 width 是没有用的，会影响第一行的排版。

能够用 colspan 实现跨行。
比方我设置第二行的第二列是它对应的上一行的跨三行：

代码如下：

<table style="width: 100%;letter-spacing: 0.5px;">
    <thead>
        <tr class="trStyle2">
            <th class="tdWidth2" style="width: 25%;">{{_('connect_status')}}</th>
            <th class="tdWidth2"   style="width: 25%;">{{_('ip_addr')}}</th>
            <th class="tdWidth2"  style="width: 25%;">Linkocal{{_('address')}}</th>
            <th class="tdWidth2"  style="width: 25%;">IPv6{{_('default_gateway')}}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trStyle3">
            <td class="tdWidth3"  style="width: 25%;">-</td>
            <td class="tdWidth3"   style="width: 25%;">-</td>
            <td class="tdWidth3"  style="width: 25%;">-</td>
            <td class="tdWidth3"  style="width: 25%;">-</td>
        </tr>
    </tbody>
    <thead>
        <tr class="trStyle2">
            <th class="tdWidth2" colspan="1">{{_('prefix_get_type')}}</th>
            <th class="tdWidth2" colspan="3">{{_('ip_get_type')}}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trStyle3">
            <td class="tdWidth3" colspan="1">-</td>
            <td class="tdWidth3" colspan="3">-</td>
        </tr>
    </tbody>
</table>

然而要实现下面的款式，就会呈现跨半行的状况：

在查找材料的时候，发现有一个博客有提到：table 怎么跨半行
其中有提供一个参考我的项目代码：github 表格跨行我的项目

钻研能够发现：实现跨半行就是把它对应的上一行又拆解成两行：colspan=2；再在要实现跨半行的中央写上 colspan= 1 即可。
代码如下：

<table style="width: 100%;letter-spacing: 0.5px;">
    <thead>
        <tr class="trStyle2">
            <th class="tdWidth2" style="width: 25%;">{{_('connect_status')}}</th>
            <th class="tdWidth2" colspan="2"  style="width: 25%;">{{_('ip_addr')}}</th>
            <th class="tdWidth2"  style="width: 25%;">Linkocal{{_('address')}}</th>
            <th class="tdWidth2"  style="width: 25%;">IPv6{{_('default_gateway')}}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trStyle3">
            <td class="tdWidth3"  style="width: 25%;">-</td>
            <td class="tdWidth3" colspan="2"  style="width: 25%;">-</td>
            <td class="tdWidth3"  style="width: 25%;">-</td>
            <td class="tdWidth3"  style="width: 25%;">-</td>
        </tr>
    </tbody>
    <thead>
        <tr class="trStyle2">
            <th class="tdWidth2" colspan="2">{{_('prefix_get_type')}}</th>
            <th class="tdWidth2" colspan="3">{{_('ip_get_type')}}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trStyle3">
            <td class="tdWidth3" colspan="2">-</td>
            <td class="tdWidth3" colspan="3">-</td>
        </tr>
    </tbody>
    <thead>
        <tr class="trStyle2">
            <th class="tdWidth2">IPv6{{_('pri_DNS')}}</th>
            <th class="tdWidth2" colspan="3">IPv6{{_('sec_DNS')}}</th>
            <th class="tdWidth2">{{_('prefix')}}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trStyle3">
            <td class="tdWidth3">-</td>
            <td class="tdWidth3" colspan="3">-</td>
            <td class="tdWidth3">-</td>
        </tr>
    </tbody>
</table>