Html <td> 宽度问题。和colspan有关系吗？如何？

Question

我的<td>由于与上面的表数据相关的某种原因，宽度似乎被忽略，因为如果我删除除似乎有问题的行之外的所有行，那么它就可以正常工作。

我认为这与 colspans 有关。
我看到这个答案colspan width issue其中讨论了您基本上需要如何想象表格中存在不可见的单元格，但我已经这样做了，但也许我做错了？

这是 html

<table border="1" cellspacing="0" cellpadding="0" width="600">
    <tr>
        <td id="IX991PI1" rowspan="1" colspan="3" width="412" height="81" ></td>
        <td id="OW6DMR2F" rowspan="1" colspan="1" width="188" height="81" ></td>
    </tr>
    <tr>
        <td id="RU5UW85Z" rowspan="1" colspan="3" width="412" height="66" ></td>
        <td id="RGPQDOYK" rowspan="2" colspan="1" width="188" height="204" ></td>
    </tr>
    <tr>
        <td id="67JXVSFB" rowspan="1" colspan="3" width="412" height="138" ></td>
    </tr>

    <tr>
        <td id="AB6FD7D5" rowspan="1" colspan="1" width="145" height="67" ></td>
        <td id="RU0G6BL8" rowspan="1" colspan="3" width="455" height="67" ></td>
    </tr>
    <tr>
        <td id="0B0D4ZVN" rowspan="1" colspan="4" width="600" height="29" ></td>
    </tr>

    <!-- the problematic row -->
    <tr>
        <td id="V4GHN5BW" rowspan="1" colspan="2" width="242" height="100" ></td>
        <td id="CK3PB3OT" rowspan="1" colspan="2" width="358" height="100" ></td>
    </tr>
</table>

这是表格的图像，因为它是错误的以及它应该是什么样子

据我所知，所有宽度加起来为 600，并且所有 colspan 都有适当的数量，以记住不可见的单元格(总共 4 列)。事实上，有问题的行是导致 4 列的原因，因此我希望它能够完全控制那条看不见的线的去向，该线会切割所有上面和下面的行。

除了 colspan 之外，我想不出其他任何可能导致问题的原因，所以我一定做错了什么。

---

编辑-另外，这是用于电子邮件的，所以我对 CSS 等有限制......

编辑-我使用的是谷歌浏览器，在 Firefox 上尝试后似乎没有问题？
不过，我随后向表中添加了更多行，看看某些内容是否在两种浏览器中都不起作用，我很快就遇到了这个问题。

底部 4 行是问题开始的地方(第一行是上面有问题的行)。即使将这些行放入自己的表中仍然存在问题。

<table border="1" cellspacing="0" cellpadding="0" width="600" >
    <tr>
        <td id="5DPKU34O" rowspan="1" colspan="4" width="412" height="81" ></td>
        <td id="XHK07WYR" rowspan="1" colspan="1" width="188" height="81" ></td>
    </tr>
    <tr>
        <td id="5IP7MCTF" rowspan="1" colspan="4" width="412" height="66" ></td>
        <td id="WO4JPVJ6" rowspan="2" colspan="1" width="188" height="204" ></td>
    </tr>
    <tr>
        <td id="JLCGN4YY" rowspan="1" colspan="4" width="412" height="138" ></td>
    </tr>
    <tr>
        <td id="RX6Q81VD" rowspan="1" colspan="1" width="145" height="67" ></td>
        <td id="6YNA6379" rowspan="1" colspan="4" width="455" height="67" ></td>
    </tr>
    <tr>
        <td id="4DIOQA09" rowspan="1" colspan="5" width="600" height="29" ></td>
    </tr>

    <!-- problem starts here -->
    <tr>
        <td id="0X3RX651" rowspan="1" colspan="2" width="242" height="50" ></td>
        <td id="L1TLGZIX" rowspan="2" colspan="3" width="358" height="220" ></td>
    </tr>
    <tr>
        <td id="U1BAFJFK" rowspan="1" colspan="2" width="242" height="170" ></td>
    </tr>
    <tr>
        <td id="VPM6G120" rowspan="1" colspan="3" width="380" height="192" ></td>
        <td id="LF6WV55J" rowspan="1" colspan="2" width="220" height="192" ></td>
    </tr>
    <tr>
        <td id="DW95YX3T" rowspan="1" colspan="5" width="600" height="16" ></td>
    </tr>
</table>

下面的图片说明了 Firefox 和 Chrome 中的问题。

Answer 1

要设置具有 colspan 的表格列的宽度，最可靠的方法是使用 <col> 显式设置每列的宽度元素。
这样，浏览器从一开始就会知道哪一列有多少宽度，以及实际有多少列!

此方法还有一个优点，即您不需要指定每个表格单元格的宽度，因此在字节方面更有效，并且在拼写错误方面更不容易出错。

<table border="1" cellspacing="0" cellpadding="0">
  <col width="145"><col width="97"><col width="170"><col width="188">
  <tr>
    <td id="IX991PI1" colspan="3" height="81"></td>
    <td id="OW6DMR2F" height="81"></td>
  </tr>
  <tr>
    <td id="RU5UW85Z" colspan="3" height="66"></td>
    <td id="RGPQDOYK" rowspan="2" height="204"></td>
  </tr>
  <tr>
    <td id="67JXVSFB" colspan="3" height="138"></td>
  </tr>

  <tr>
    <td id="AB6FD7D5" height="67"></td>
    <td id="RU0G6BL8" colspan="3" height="67"></td>
  </tr>
  <tr>
    <td id="0B0D4ZVN" colspan="4" height="29"></td>
  </tr>

  <!-- the no longer problematic row -->
  <tr>
    <td id="V4GHN5BW" colspan="2" height="100"></td>
    <td id="CK3PB3OT" colspan="2" height="100"></td>
  </tr>
</table>

我还冒昧地删除了所有 colspan=1和rowspan=1属性，因为这些不是必需的。还有width表格本身的属性也是多余的。

在 Chrome 和 Mozilla 中进行了测试，在 Thunderbird 中看起来也不错。