Menu
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).
840
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
remove all widths and add . content-loader table tr td { white-space: nowrap; } ? Since you have a fixed width for the container, you have too many fields inside of it to fit properly. If you had less it probably would have adjusted on its own.
Take the width of the table and divide it by the number of cell (). If the table dynamically widens or shrinks you could dynamically increase the cell size with a little javascript.
Add the below CSS to your <table>:
table-layout: fixed; width: 100%; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
