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%; }

[Luca_pluatrco]

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)?

Guardando in rete mi pare di aver capito che il problema potrebbe risiedere nel padding, in quanto la width non ne tiene conto.
Di conseguenza dovrei ridurre la larghezza (attualmente width:100%) per non far fuoriuscire la tabella.

Potreste confermarmi questa come unica alternativa o ve ne sono altre migliori?
Grazie