I dont think a 100% width will solve the issue as it is 100% of the parent's element.
The default behavior is that child takes his width from his parent.
Here we want the opposite: an element that fixe his width according to his content.
Some properties can change the rule: absolute position, float or display:table, for exemple, can force a parent to grow with his children.
This is hard to answer without the HTML, but basicly the idea is to give to the footer/header and table's container a property that will make it grow with the content. So then, the footer and header will take all the room in the parent = the longest content's width.
I'm not sure that's clear...
A simple example to show what I mean:
Code:
<!DOCTYPE html>
<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>
#main {position:absolute;left:0;top:0;min-width:100%;}
#header {background:red;}
#footer {background:green;}
</style>
</head>
<body>
<div id="main">
<div id="header">header</div>
<table><tr><td>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td></tr></table>
<div id="footer">footer</div>
</div>
</body>
</html>
Maybe there are other/better way to make it working...