Weird but common table problem

**Paramiliar** · Mar 19th, 2011, 7:41 am

Hey guys need some help on this, I have a table that exceeds the width of the page, this table is contained in a divider that puts borders and other things around the table, however if the table is wider than the page it overlaps the divider and the divider does not resize beyond the width of the page.

For an example of this see the code below, I need to have the divider to be ALWAYS 100% of the page and if the table is greater than 100% the divider should increase as well.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
	width:100%;
	height:100%;
}
#testdiv {
	background-color:#eeeeee;
	margin:0 auto;
}
#testdiv2 {
	padding:5px;
}
</style>
</head>
 
<body>
<div id="testdiv">
<div id="testdiv2">
<table cellpadding="2" cellspacing="2" width="110%" bgcolor="#dddddd">
<tr><td bgcolor="#ffffff">&nbsp;</td></tr></table>
</div>
</div>
</body>
</html>

**Paramiliar** · Mar 19th, 2011, 11:15 am

managed to solve this one

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#testdiv {
	background-color:#eeeeee;
	display:-moz-inline-stack;
	padding:0 10px;
	display:inline-block;
	zoom:1;
	*display:inline;
}
</style>
</head>
 
<body>
<div id="testdiv">
<table cellpadding="2" cellspacing="2" width="100%" bgcolor="#dddddd">
<tr>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
	<td bgcolor="#ffffff">aaaa</td>
	<td bgcolor="#ffffff">bbbb</td>
	<td bgcolor="#ffffff">cccc</td>
	<td bgcolor="#ffffff">dddd</td>
	<td bgcolor="#ffffff">eeee</td>
</tr>
</table><br />&nbsp;aaaaa
</div>
</body>
</html>