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>