cell span all columns of dynamicly generated table

Question

For a display page in my app, I am generating several dynamic tables, whose column count changes depending on certain business logic. However, I'm required to have a "title" row that spans the whole table.

Following the advice in the top-voted answer here, I set the colspan to 100%. This worked great while I was developing (debugging using opera), but testing in IE8 revealed that it doesn't hold true for all browsers:

The funny thing, though, is that it works fine in compatibility view (this is almost identical to how it displays in opera, as well):

Currently my document looks a little like this:

  <table>
    <tr class="head">
      <th colspan="100%">Circuit Ex Circuit 9</th>
    </tr>
    <!-- and so on, for all rows -->
  </table>

So, not being an HTML guru (let alone an IE guru), I'm sorta stumped on this one. How can I fix this to handle full table span on IE?

---

Edit - I'm not sure why my question has such low views, and no one even commented - I could use any help on this, please...

Answer 1

Well, your other question seemed to be asking how to solve it in the HTML so that leaves javascript as the other option.

If you are using javascript to populate the table then you should be able to use javascript to count your columns and then set the colspan on the first row appropriately. I don't know what form you are getting the table in, if its already HTML then you might be best off putting the table into your page and then counting the number of columns in the first row and then adding in a new first row with your header.

If the data is coming through in some kind of object table type structure (eg 2d array) then you should be able to just count the number of columns and then generate a header row with the right colspan.

Alternatively if the table is a fixed width (I assume its not) then you could put that header cell outside the table in a div with a set width and the formatting you want to make it match.