with - td word-wrap break-word




How do I make an HTML table the same width as its containing div tag? (2)

Add the below CSS to your <table>:

table-layout: fixed;
width: 100%;

I have a table inside a div. I want the table to occupy the entire width of the div tag.

In the CSS, I've set the width of the table to 100%. Unfortunately, when the div has some margin on it, the table ends up wider than the div it's in.

I need to support IE6 and IE7 (as this is an internal app), although I'd obviously like a fully cross-browser solution if possible!

I'm using the following DOCTYPE...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Edit: Unfortunately I can't hard-code the width as I'm dynamically generating the HTML and it includes nesting the divs recursively inside each other (with left margin on each div, this creates a nice 'nested' effect).


Percentage-based widths are relative to the first parent element that has a width specified. If your div does not have a width specified then the width of the table has nothing to do with it. Can you post a simplified version of the markup that shows what your DOM tree looks like?

From another angle, if your parent div DOES have a width set and the margin is still affecting your table then you are probably in quirks mode. You have specified your DOCTYPE, but be aware that the DOCTYPE element MUST be the first line in the file. Something else to note when dealing with IE6, by default, if your content is wider than your parent, the parent will be stretched to accomodate, you can stop this by adding overflow: hidden to your css for the parent element but in the process you might obscure some of the child element's content.