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

Question

我的 <td> 宽度似乎由于某种原因而被忽略，原因与它上面的 table 数据有关，因为如果我删除除了似乎有问题的行之外的所有行，它就会工作很好。

我认为这与 colspans 有关。
我看到了这个答案 colspan width issue，它谈到了你基本上需要如何想象你的 table 中有不可见的细胞，但我已经这样做了，但也许我做错了？

这是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>

这是 table 的图像，因为它是错误的，它应该是这样的

据我所知，所有宽度加起来都是 600，并且所有 colspan 都有适当的数量，以记住不可见的单元格（总共 4 个 cols）。事实上，有问题的行是导致有 4 列的原因，所以我希望它能够完全控制那条不可见的线在哪里切割所有上面和下面的行。

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

编辑 - 此外，这是用于电子邮件，所以我仅限于 css 等...

编辑 - 我使用的是 google chrome，在 firefox 上尝试后似乎没有问题？
但是，我随后向 table 添加了更多行，以查看是否某些内容在两种浏览器中都无法正常工作，并且我很快运行解决了该问题。

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

<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

尝试删除 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>

Answer 2

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

这种方法的另一个优点是您不需要在每个 table 单元格中指定宽度，因此它在字节数方面效率更高，并且在拼写错误方面更不容易出错.

<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 属性，因为这些不是必需的。 table 本身的 width 属性也是多余的。

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

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

Html <td> width issue. Is it related to colspan? How?

html

html-table

width