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 个 cols）。事实上，有问题的行是造成 4 列的原因，所以我希望它能够完全控制切割所有上方和下方行的不可见线的位置。

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

---

编辑-另外，这是用于电子邮件的，所以我仅限于 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

要设置具有 colspans 的表格列的宽度，最可靠的方法是使用 <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 中看起来也不错。

Answer 2

尝试删除 td in row 有问题的标签中的宽度。这会为其子项设置最大宽度。

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