<table><tr>不换行,使用rowpan导致表格错位

现象:

在这里插入图片描述

代码:

<html>
<body>

 <table>
   <tr>
     <th colspan="2">受入</th>
     <th colspan="2">检收</th>
     <th colspan="2">在库</th>
     <th colspan="2">供给</th>
   </tr>
   <tr>
     <td width="50/12" rowspan="4">C侧</td>
     <td width="100/12" rowspan="4"></td>
     <td width="50/12" rowspan="4">C侧</td>
     <td width="100/12" rowspan="4"></td>
     <td width="50/12" rowspan="8">实物</td>
     <td width="100/12" rowspan="8"></td>
     <td width="50/12" rowspan="3">顺建</td>
     <td width="100/12" rowspan="3"></td>
   </tr>
   <tr>
     <td></td>
     <td></td>
   </tr>

  </table>
</body>
</html>

错误原因:

当某一个tr中所有的td元素的rowspan属性均大于1时,会发生错位情况。因为rowspan是用来占行的,如果一行里全部td的 rows 都为2,则意味着 下一tr 里应该是没有 td 元素的但是实际上 下一tr 又有td,所以这行的td没有容身之处,被挤到右边去了。

如下图,第二行有两个元素,当第一行也有两个未跨行元素时,第二行就会正确显示,而不是被挤到右边。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43361722/article/details/126154962