Html – How to make an HTML table the same width as its containing div tag


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" "">

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).

Best Solution

Add the below CSS to your <table>:

table-layout: fixed;
width: 100%;