Ciao,

devo inserire delle tabelle in box contenitori. Le tabelle possono avere un numero variabile di colonne (scelte dinamicamente dall'utente).
Il mio problema è che restringendo la finestra del browser la tabella non si restringe (come invece fa il contenitore) e di conseguenza la tabella fuoriesce dal box.

Come posso fare in modo da evitare questo e rendere, se possibile, riducibili le celle della tabela? Una soluzione sarebbe impostare overflow:auto al box in modo da avere la scrollbar orizzontale, ma in alcuni casi le tabelle sono molto lunghe e risulta piuttosto scomodo dover andare a fondo pagina per scorrere la porzione nascosta della tabella.

Vi posto il codice (dove WebPart è il box contenitore).
Grazie
codice:
.webpart{
	width:100%;   		
	margin:0px;
	padding:0;
}

.webpartheader{
	width:100%;		
	height: 50px;
}

.webparttitle{
	float:left;    
	margin:10px 0 0 10px;        
	padding:0;	
	height:auto;
	display:block;	
}

.webpartbody
{
	width:96%;
	margin:3px auto;
	padding:0 5px;
	/*overflow:auto;   ----- Se possibile non lo userei!  ----  */
}

.List 
{	
	width: auto;
}

.List  table{ border-collapse:collapse; }

.ListCell label{	margin-left: 5px; }

.ListTitle{	width: 100%;}

.ListHeader{
	width: auto;        /*if width: 100%; -> the first COL takes all the possible space!*/
	padding: 2px;
	white-space: nowrap;	
}

.ListRows {	width: auto; }
codice:
<div class="webpart">
	<div class="webpartheader">
		<div class="webparttitle">
			Meeting Agenda
		</div>
	</div>
	<div class="webpartbody">
	<table class="List" border="0">
	<tr>
		<td>
		<div id="ctl08">
		<table class="ListRows" border="0">
			<tr>
				<td class="ListHeader"><span>Title  </span></td>
				<td class="ListHeader"> <span>Duration  </span></td>
				<td class="ListHeader"><span>Responsible  </span></td>
				<td class="ListHeader"></td>
				<td class="ListHeader"></td>
				<td class="ListHeader"></td>
				<td class="ListHeader"></td>
			</tr>
			<tr id="ctl00_row1" class="ListRow">
				<td class="ListCell">Welcome to all participants
 
<br type="_moz" /> </td>
				<td class="ListCell">09:00 </td>
				<td class="ListCell">Burak
 </td>
				<td class="ListCell"></td>
				<td class="ListCell">
				     <input type="image"  />
				</td>
				<td class="ListCell">
                                      Edit</td>
				<td class="ListCell">
                                       <input type="image"  />
                               </td>
			</tr>													
		</table>
		</div>
		<div id="ctl11">
		<table class="ListBottom" border="0">
			<tr>
				<td></td>
			</tr>
		</table>
		</div>
		</td>
	</tr>
	</table>
	</div>
	<div class="webpartfooter">
		 
	</div>
</div>