title: Setting class on HR breaks TD colspan
body: <p>I have a nested table arrangement for displaying data. I want the nested table to be in a TD that spans all the parent table columns. So I have colspan set. However I also want the user to be able to click on the parent to hide/unhide the child data. This works fine in IE8, but in FireFox and Chrome the nested table is ignoring the colspan and is only sown in the first column.</p>
  
  <p>The code below is an example of the problem. If you click the first column text you'll see what I mean. The final row of data isn't classed so it shows ok on page load, but once the class is set it goes wrong again.</p>
  
  <p>Any thoughts?</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html;charset=iso-8859-1"&gt;
  &lt;script type="text/javascript"&gt;
  function expandRow(rowID, clickRow)
  {
      var item = document.getElementById(rowID);
      if(item.className=='hidden'){
          item.className = 'unhidden';
      }else{
          item.className = 'hidden';
      }
  }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .hidden { display: none; }
  .unhidden { display: block; }
  &lt;/style&gt;
  &lt;title&gt;Table Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Col1&lt;/th&gt;
        &lt;th&gt;Col2&lt;/th&gt;
        &lt;th&gt;Col3&lt;/th&gt;
        &lt;th&gt;Col4&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="collapsed" onclick="expandRow('id30', this);"&gt;Click Here to Expand&lt;/td&gt;
        &lt;td&gt;data1&lt;/td&gt;
        &lt;td&gt;data2&lt;/td&gt;
        &lt;td&gt;data3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="hidden" id="id30"&gt;
        &lt;td colspan="4"&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;data1&lt;/td&gt;
                &lt;td&gt;data2&lt;/td&gt;
                &lt;td&gt;data3&lt;/td&gt;
                &lt;td&gt;data4&lt;/td&gt;
                &lt;td&gt;data5&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="collapsed" onclick="expandRow('id95', this);"&gt;Click Here to Expand&lt;/td&gt;
        &lt;td&gt;data1&lt;/td&gt;
        &lt;td&gt;data2&lt;/td&gt;
        &lt;td&gt;data3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="hidden" id="id95"&gt;
        &lt;td colspan="4"&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;data1&lt;/td&gt;
                &lt;td&gt;data2&lt;/td&gt;
                &lt;td&gt;data3&lt;/td&gt;
                &lt;td&gt;data4&lt;/td&gt;
                &lt;td&gt;data5&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="collapsed" onclick="expandRow('id96', this);"&gt;Click Here to Expand&lt;/td&gt;
        &lt;td&gt;This one&lt;/td&gt;
        &lt;td&gt;displays ok&lt;/td&gt;
        &lt;td&gt;until you set the class!&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="id96"&gt;
        &lt;td colspan="4"&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;data1&lt;/td&gt;
                &lt;td&gt;data2&lt;/td&gt;
                &lt;td&gt;data3&lt;/td&gt;
                &lt;td&gt;data4&lt;/td&gt;
                &lt;td&gt;data5&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>