title: Html <td> width issue. Is it related to colspan? How?
body: <p>My <code>&lt;td&gt;</code> 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.</p>
  
  <p>I am thinking it has something to do with the colspans.<br>
  I saw this answer <a href="https://stackoverflow.com/questions/5373893/colspan-width-issue">colspan width issue</a> 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?</p>
  
  <p>Here is the html</p>
  
  <pre><code>&lt;table border="1" cellspacing="0" cellpadding="0" width="600"&gt;
      &lt;tr&gt;
          &lt;td id="IX991PI1" rowspan="1" colspan="3" width="412" height="81" &gt;&lt;/td&gt;
          &lt;td id="OW6DMR2F" rowspan="1" colspan="1" width="188" height="81" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="RU5UW85Z" rowspan="1" colspan="3" width="412" height="66" &gt;&lt;/td&gt;
          &lt;td id="RGPQDOYK" rowspan="2" colspan="1" width="188" height="204" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="67JXVSFB" rowspan="1" colspan="3" width="412" height="138" &gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td id="AB6FD7D5" rowspan="1" colspan="1" width="145" height="67" &gt;&lt;/td&gt;
          &lt;td id="RU0G6BL8" rowspan="1" colspan="3" width="455" height="67" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="0B0D4ZVN" rowspan="1" colspan="4" width="600" height="29" &gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;!-- the problematic row --&gt;
      &lt;tr&gt;
          &lt;td id="V4GHN5BW" rowspan="1" colspan="2" width="242" height="100" &gt;&lt;/td&gt;
          &lt;td id="CK3PB3OT" rowspan="1" colspan="2" width="358" height="100" &gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is an image of the table as it is wrong and how it should look</p>
  
  <p><a href="https://i.stack.imgur.com/lfJzp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lfJzp.png" alt="Html Table Image"></a></p>
  
  <p>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.</p>
  
  <p>I can't think of anything else that could be causing the issue other than the colspans, so I must be doing something wrong.</p>
  
  <hr>
  
  <p>Edit- Also, this is for emails, so I am limited on css and such...</p>
  
  <p>Edit- I was using google chrome and after trying it on firefox there seems to be no issue?<br>
  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.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;table border="1" cellspacing="0" cellpadding="0" width="600" &gt;
      &lt;tr&gt;
          &lt;td id="5DPKU34O" rowspan="1" colspan="4" width="412" height="81" &gt;&lt;/td&gt;
          &lt;td id="XHK07WYR" rowspan="1" colspan="1" width="188" height="81" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="5IP7MCTF" rowspan="1" colspan="4" width="412" height="66" &gt;&lt;/td&gt;
          &lt;td id="WO4JPVJ6" rowspan="2" colspan="1" width="188" height="204" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="JLCGN4YY" rowspan="1" colspan="4" width="412" height="138" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="RX6Q81VD" rowspan="1" colspan="1" width="145" height="67" &gt;&lt;/td&gt;
          &lt;td id="6YNA6379" rowspan="1" colspan="4" width="455" height="67" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="4DIOQA09" rowspan="1" colspan="5" width="600" height="29" &gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;!-- problem starts here --&gt;
      &lt;tr&gt;
          &lt;td id="0X3RX651" rowspan="1" colspan="2" width="242" height="50" &gt;&lt;/td&gt;
          &lt;td id="L1TLGZIX" rowspan="2" colspan="3" width="358" height="220" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="U1BAFJFK" rowspan="1" colspan="2" width="242" height="170" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="VPM6G120" rowspan="1" colspan="3" width="380" height="192" &gt;&lt;/td&gt;
          &lt;td id="LF6WV55J" rowspan="1" colspan="2" width="220" height="192" &gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="DW95YX3T" rowspan="1" colspan="5" width="600" height="16" &gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is an image illustrating the issue in Firefox and Chrome.
  <a href="https://i.stack.imgur.com/0DANE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DANE.png" alt="Html Table Image"></a></p>