Question

我的<td>宽度似乎因为与其上面的tabledatas相关的某些原因而被忽略，因为如果我删除除了似乎有问题的行之外的所有行，那么它可以正常工作。

我认为它与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，并且所有的colspans都有适当的数量来记住不可见的细胞（总共4个cols）。事实上，有问题的行是什么使得有4个cols，所以我希望它可以完全控制那条不可见线在哪里切断所有上下行。

我无法想到除了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>元素显式设置每列的宽度。
这样，浏览器将从一开始就知道哪个列具有哪个宽度，以及实际有多少列！

此方法还具有以下优点：您不需要在每个表格单元格中指定宽度，因此它在字节方面更有效，并且在拼写错误方面更不容易出错

＆＃13;

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

＆＃13;

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

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

Answer 2

尝试删除行有问题标记中的td宽度。这将设置其子项的最大宽度。

<!-- 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>

Html宽度问题。它与colspan有关吗？怎么样？

2 个答案: