title: Proper CSS for fixed table layout in IE8 with colspan
body: <p>This is an excert from a dynamically built table.  What is the proper CSS to make the first <code>&lt;td&gt;</code> in the second rwo (id='backdate') a fixed width? <em>(currently it does not change width when increasing or decreasing the 70 value)</em></p>
  
  <p><img src="https://i.stack.imgur.com/C8UxZ.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;table class='fifo' width='850' style='width:850px;table-layout:fixed;'&gt;
    &lt;thead&gt;&lt;tr&gt;
     &lt;th colspan='3' style='width:820px;'&gt;Details&lt;/th&gt;
     &lt;th style='cursor:pointer;width:15px;' title='Click to save.'&gt;&lt;span class='ui-icon ui-icon-check'/&gt;&lt;/th&gt;
     &lt;th style='width:15px;' title='Click to close.'&gt;&lt;span class='ui-icon ui-icon-closethick'/&gt;&lt;/th&gt;
    &lt;/tr&gt;&lt;/thead&gt;
    &lt;tbody&gt;
     &lt;tr&gt;&lt;td id='BACKDATE' colspan='1' class='button' style='cursor:pointer;width:70px;' width='70' title='Back Date Start Date/time.'&gt;Back Date&lt;/td&gt;
     &lt;td colspan='4' style='width:780px;' width='780'&gt;&lt;b&gt;Start Date: &lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsbin.com/okekal/13/edit" rel="nofollow noreferrer">FIDDLE WITH SOLUTION...</a></p>