Html< td>宽度问题。它与colspan有关吗？怎么样？ [英] Html <td> width issue. Is it related to colspan? How?

问题描述

我的< td> 宽度由于某种原因与上面的tabledatas相关，似乎被忽略了，因为如果我删除除了似乎具有问题，它然后工作正常。

我认为它与colspans有关。

我看到了这个答案

据我所见，所有宽度合计为600，并且所有的群体都有合适的数量记住不可见的细胞（共4列）。事实上，有问题的行是什么使得有4列，所以我希望它能够完全控制无形的行将削减所有上面和下面的行。

我想不出其他任何可能导致colspans问题的事情，所以我一定是做错了。

---

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

编辑 - 我使用谷歌铬和后尝试它在Firefox上似乎没有问题？

然而，然后，我添加了更多的行到表中，看看有什么东西在两个浏览器中都不起作用，我很快就遇到了这个问题。 / p>

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

 < table border =1cellspacing =0cellpadding =0width =600> 
< tr> 
< td id =5DPKU34Orowspan =1colspan =4width =412height =81>< / td> 
< td id =XHK07WYRrowspan =1colspan =1width =188height =81>< / td> 
< / tr> 
< tr> 
< td id =5IP7MCTFrowspan =1colspan =4width =412height =66>< / td> 
< td id =WO4JPVJ6rowspan =2colspan =1width =188height =204>< / td> 
< / tr> 
< tr> 
< td id =JLCGN4YYrowspan =1colspan =4width =412height =138>< / td> 
< / tr> 
< tr> 
< td id =RX6Q81VDrowspan =1colspan =1width =145height =67>< / td> 
< td id =6YNA6379rowspan =1colspan =4width =455height =67>< / td> 
< / tr> 
< tr> 
< td id =4DIOQA09rowspan =1colspan =5width =600height =29>< / td> 
< / tr> 
 
 <！ - 问题从这里开始 - > 
< tr> 
< td id =0X3RX651rowspan =1colspan =2width =242height =50>< / td> 
< td id =L1TL​​GZIXrowspan =2colspan =3width =358height =220>< / td> 
< / tr> 
< tr> 
< td id =U1BAFJFKrowspan =1colspan =2width =242height =170>< / td> 
< / tr> 
< tr> 
< td id =VPM6G120rowspan =1colspan =3width =380height =192>< / td> 
< td id =LF6WV55Jrowspan =1colspan =2width =220height =192>< / td> 
< / tr> 
< tr> 
< td id =DW95YX3Trowspan =1colspan =5width =600height =16>< / td> 
< / tr> 
< / table> 
  

这是一张图片，说明Firefox和Chrome中的问题。

解决方案

设置具有集合的表格列的宽度，最可靠的方法是使用 < col> 元素。

这样，浏览器将从头开始知道哪个列具有哪个宽度，以及那里有多少列实际上是！

这种方法的优点是不需要在每个表格单元格中指定宽度，所以它在字节方面效率更高，而且错误更少

< col width =145>< col width =97>< col width =170>< col width =188> < TR> < td id =IX991PI1colspan =3height =81>< / td> < td id =OW6DMR2Fheight =81>< / td> < / TR> < TR> < td id =RU5UW85Zcolspan =3height =66>< / td> < td id =RGPQDOYKrowspan =2height =204>< / td> < / TR> < TR> < td id =67JXVSFBcolspan =3height =138>< / td> < / TR> < TR> < td id =AB6FD7D5height =67>< / td> < td id =RU0G6BL8colspan =3height =67>< / td> < / TR> < TR> < td id =0B0D4ZVNcolspan =4height =29>< / td> < / TR> <！ - 不再有问题的行 - > < TR> < td id =V4GHN5BWcolspan =2height =100>< / td> < td id =CK3PB3OTcolspan =2height =100>< / td> < / tr>< / table>

删除所有 colspan = 1 和 rowspan = 1 属性的自由，因为这些属性不是必需的。而表格本身的宽度属性也是多余的。

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

My <td> width seems to be ignored for some reason related to the tabledatas above it since if I remove all rows except the row that seems to be having the issue, it then works fine.

I am thinking it has something to do with the colspans.
I saw this answer colspan width issue which talks about how you basically need to imagine there are invisible cells in your table, but I was already doing that, but maybe I am doing it wrong?

Here is the 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>

Here is an image of the table as it is wrong and how it should look

As far as I can see, all widths add up to 600, and all colspans have the right amount keeping the invisible cells in mind (total of 4 cols). In fact, the problematic row is what's making there be 4 cols, so I would expect it to have full control on where that invisible line goes that cuts all the above and below rows.

I can't think of anything else that could be causing the issue other than the colspans, so I must be doing something wrong.

---

Edit- Also, this is for emails, so I am limited on css and such...

Edit- I was using google chrome and after trying it on firefox there seems to be no issue?
However, I then added more rows to the table to see if something won't work in both browsers, and I have quickly ran into that problem.

The bottom 4 rows are where the problems start (the first is the problematic row from above). Even putting those rows into their own table still has issues.

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

Here is an image illustrating the issue in Firefox and Chrome.

解决方案

To set the widths of table columns that have colspans, the most reliable method is to set the width for each column explicitly using <col> elements.
That way, the browser will know from the start which column has which width, and also how many columns there actually are!

This method also has the advantage that you won't need to specify the width in each and every table cell, so it's more efficient in terms of bytes, and less error-prone in terms of typos.

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

I also took the liberty of removing all colspan=1 and rowspan=1 attributes, since those are not necessary. And the width attribute on the table itself was also superfluous.

Tested in Chrome and Mozilla, and it looks good in Thunderbird too.

这篇关于Html< td>宽度问题。它与colspan有关吗？怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！