2

I have a table like that:

<table width="100%" style="table-layout: fixed;" class="listtable"> ... </table>

After DOM load I remove the last td. Every browser, except IE8 of course, keeps the table at 100%.

IE8 just removes that column leaving the space and not adjusting the other columns. When inspecting the table, the table element is at 100% but the tbody is not. I already tried setting the width of the tbody after removing the column, but it had no effect.

Does anyone know how I can force IE8 to re-render my table and stretch over 100%?

Note: I'm not in control of the generated html on the server-side so I need to use JavaScript here.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
acme
  • 14,654
  • 7
  • 75
  • 109
  • Could you provide the full structure of the table with thead, tbody, th and td tags ? And the javascript code you are using ? And why not on http://jsfiddle.net/ :P – Gilles Hemmerlé Dec 19 '12 at 12:07

1 Answers1

1

I tried to create a jsfiddle with your need and I do not encounter your issue with IE9 with IE8 compatibility mode activated. Is that script working for you ? http://jsfiddle.net/3TpGt/2/

I created a code without use of javascript because I do not know if you want to use a library or not.

var table = document.getElementById("myTable");

var th = table.getElementsByTagName("th");
var thead = table.getElementsByTagName("thead");
var tbody= table.getElementsByTagName("tbody");
var tbody_tr= tbody[0].getElementsByTagName("tr");
var thead_tr = thead[0].getElementsByTagName("tr");

thead_tr[0].removeChild(th[th.length-1]);

var current_td = null;
for(i = 0; i < tbody_tr.length; i++) {
    current_td = tbody_tr[i].getElementsByTagName("td");
    tbody_tr[i].removeChild(current_td[current_td.length-1]);
}​

Then you can force the columns width after the deletion like :

th[0].width = '50%';
th[1].width = '50%';

Or if you want that the browser automaticaly recalculate the columns width, change the style of your table :

style="table-layout: auto; "
Gilles Hemmerlé
  • 439
  • 3
  • 10
  • This seems to occur only in IE8 standards mode. Thanks! I found [this answer](http://stackoverflow.com/a/6079413/156481) which basically does the same thing by setting the table-layout. Though it really only works when using the `setTimeout`, very strange. You could add this link to your answer and I'll mark it has accepted! Thank you for your help! – acme Dec 19 '12 at 13:17
  • Oh ok sorry I cannot help you then, because I have not the original IE8 installed on my computers ! You're welcome ^^ – Gilles Hemmerlé Dec 19 '12 at 13:21