2

SHORT VERSION: Internet Explorer tables set to width:100% bust out of their parent elements.

I know this is an old and known bug, but I've Googled it and Googled it and haven't found any answers. I've just found other questions, all without answers. A few "solutions" I found didn't work. Maybe I'm not looking hard enough or for the right thing, but I'm asking because I just can't fit it, so don't flame me for not looking first. Anyway, the problem I'm having is one I'm sure most of you have had, and if not the problem then just the browser altogether: Internet Explorer. That one person you always try to avoid but inevitably run in to. So, the table width bug. By default, tables are pretty crammed up and rather small, their width set by the size of the content in the rows. So, of course, I used width:100% to make it stretch out across its parent div. To no surprise, IE thinks that means it should bust out of its parent and be 100% of the page. So, I've tried a number of solutions I know personally, however none seem to work. I know there's a very simple solution out there, but I just can't find it. Could someone who's had this problem please lend me a hand?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
guydude
  • 33
  • 3
  • one solution is too not use tables. – stevebot Feb 12 '11 at 20:27
  • @stevebot it's for a forum, and tables are the best way to organize a forum. – guydude Feb 12 '11 at 20:32
  • do you have a fixed width for the parent object? if so, just set width to that fixed number of pixels rather than 100%. – Spudley Feb 12 '11 at 20:35
  • @Spudley No, I have it adjusting to the page width. A working example of what I want to achieve could be found on any Zetaboards forum. – guydude Feb 12 '11 at 20:40
  • 2
    just curious, who says tables are the best way to organize a forum? I don't like to use tables for layout. They are intended for displaying tabular data, like in a csv. See http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – stevebot Feb 12 '11 at 22:01

2 Answers2

1

What about trying:

#el { margin-right:-1px; }
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
1

Bit late, but probably got an answer :) I faced this problem in IE 11 (please do not support that in your apps - total time waste) and fixed by this

table {
    table-layout: fixed;
}

Give it a try and let me know if it works well for you

Update: It makes column widths fixed

Hourglasser
  • 667
  • 1
  • 9
  • 17