关于前端: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>