title: Why is my table cell width wrong in Chrome?
body: <p>I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.</p>
  
  <pre><code>&lt;table border="1" style="border-collapse:collapse;"&gt;
      &lt;tr&gt;
          &lt;td style="WIDTH: 205px;"&gt;1&lt;/td&gt; &lt;!--This width doesn't apply in Chrome--&gt;
          &lt;td style="width:100%;"&gt;2&lt;/td&gt;
          &lt;td style="WIDTH: 5px;"&gt;3&lt;/td&gt;
      &lt;/tr&gt;                
  
      &lt;tr&gt;
          &lt;td colspan="2"&gt;
  
                  &lt;TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;"&gt;
                      &lt;TR&gt;
                          &lt;TD style="width:130px;"&gt;
                              A&lt;/TD&gt;
                          &lt;TD style="width:90px;"&gt;
                              B&lt;/TD&gt;
                          &lt;TD style="width:230px;"&gt;
                             C&lt;/TD&gt;
                      &lt;/TR&gt;
  
                  &lt;/TABLE&gt;        
          &lt;/td&gt;
          &lt;td&gt;
              D
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;  
  </code></pre>
  
  <p>Simple enough, really....or so I thought.</p>
  
  <p>It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.</p>
  
  <p><img src="https://i.stack.imgur.com/4oA1b.png" alt="enter image description here"></p>
  
  <p>Why is this happening, and how can I get around this?</p>