Perchè table con width=100% fuoriesce dal div contenitore (non usando float)?

[Luca_pluatrco]

Ciao,

Devo visualizzare delle tabelle al'interno di contenitori (chiamati "webPart"). Ho realizzato i relativi file CSS per ottenere dei template da usare in varie parti del portale (che utilizza layout a 2 e 3 colonne con posizionamento assoluto).
Tutto funziona correttamente quando le tabelle dentro i contenitori sono posizionati nella colonna centrale (liquida) con una min-width:950px. Il problema invece sorge quando vengono collocate in una delle colonne laterali, che hanno larghezza fissa (270px per layout a tre colonne e 350px per quello a 2 colonne), in quanto la tabella (di classe .list) fuoriesce dal contenitore div (di classe .webPart). Questo si vede chiaramente nell'immagine in allegato, dove la tabella è spostata a dx fuori dal contenitore con sfondo bianco.

Può questo dipendere dal fatto che il contenitore ha width:96% e la tabella width:100%? Tuttavia la tabella dovrebbe considerare il contenitore padre a prescindere dalle dimensioni di questo, giusto? Come potrei fare in modo che la tabella non fuoriesca (senza tagliarla con overflow:hidden)?

Di seguito posto struttura HTML e regole CSS.
Grazie.

Struttura HTML:

<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" name="ctl00_moveDown1" id="_MoveDown1" src="MoveDown.gif" style="border-width:0px;" />
				</td>
				<td class="ListCell">
                                      Edit</td>
				<td class="ListCell">
                                       <input type="image" name="cmdDel1" id="cmdDel1" src="Delete.gif" onclick="" style="border-width:0px;" />
                               </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>

/*---   Here the rules for the div container  (webPart) ----*/
.webpart
{
	width:100%;   		
	background: white url("images/corner_bottom_right.gif") bottom right no-repeat;   
	margin:0px;
	padding:0;
	font: 14px Calibri;
}

.webpartheader
{
	width:100%;		
	background: url("images/corner_top_right.gif") top right no-repeat;	
	height: 50px;
}

.webparttitle
{
	float:left;    
	margin:10px 0 0 10px;        
	padding:0;
	font-weight:bold;
	font-family: Calibri;
	font-size:16px;
	letter-spacing: -0.2px;
	height:auto;
	display:block;
}

.webpartbody
{
	width:96%;
	margin:3px auto;
	padding:0 5px;
}

.webpartfooter
{
	background:url("images/corner_bottom_left.gif") bottom left no-repeat;	
	margin:0;
	padding:0;
}
/*---  Here the rules for list  ----*/

.List { width: 100%; }

.List  table{ border-collapse:collapse; }

.ListCell {
	vertical-align:top;
	padding: 5px;
	background-color: #e0F0FF; 
}

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

.ListRows {	width: 100%; }

.ListRows td{ border-bottom: 5px solid white;}  

.ListBottom { width: 100%;}

.ListRow{	width: 100%; }