Posto qui perchè è stato creato in CSS la maggior parte del lavoro che vi descrivo:

Con lo scopo di creare una sorta di "menù a schede", ho creato una tabella in cui, sulla prima riga, ci sono le varie "opzioni" disponibili (7 celle), in una seconda riga c'è una sola cella (con colspan=7) in cui appare un testo che varia a seconda dell'opzione scelta.

Il mio problema è che quando il testo supera la grandezza della tabella, quest'ultima si allarga a dismisura. Preferirei che la tabella rimanesse sempre fissa ed il testo andasse a capo automaticamente. E' possibile fare questo?

Cercando in vari forum, post e robbe varie ho letto che basterebbe settare un "width=xXx" per risolvere il tutto. A me ciò non mi funziona

questo è il mio problema
vi posto codice html e css e vi mando alla visualizzazione del mio problema:


il file .PHP
codice:
<link rel="StyleSheet" href="soreta.css" type="text/css">

<body onLoad=disable()>

<table class=titolo>
	<tr>
		<td>
			<div id="titolo1" class=sele onClick="mostraMenu('1')">Antipasti</div>
		</td>
		<td>
			<div id="titolo2" onClick="mostraMenu('2')">Primi</div>
		</td>
		<td>
			<div id="titolo3" onClick="mostraMenu('3')">Secondi</div>
		</td>
		<td>
			<div id="titolo4" onClick="mostraMenu('4')">Pizze</div>
		</td>
		<td>
			<div id="titolo5" onClick="mostraMenu('5')">Contorni</div>
		</td>
		<td>
			<div id="titolo6" onClick="mostraMenu('6')">Dessert</div>
		</td>
		<td>
			<div id="titolo7" onClick="mostraMenu('7')">Bevande</div>
		</td>
		<tr>
<td id=stilert colspan=7>
<div id="scelte1" class=>AntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipastiAntipasti</div>
<div id="scelte2" >Primi</div>
<div id="scelte3" >Secondi</div>
<div id="scelte4" >Pizze</div>
<div id="scelte5" >Contorni</div>
<div id="scelte6" >Dessert</div>
<div id="scelte7" >Bevande</div></td>
</tr>
</table>


</body>


<script type="text/javascript">
scelte = "1";
function disable()
{
	<?php
	for ($i=1;$i<8;$i++)
	{
		echo "document.getElementById(\"titolo$i\").style.cursor=\"pointer\"; ";
		echo "document.getElementById(\"scelte$i\").style.display=\"none\"; ";
	}
	?>
	document.getElementById("scelte1").style.display="inline";
}

function mostraMenu(val)
{
	if (val==scelte) return;
	id="titolo"+val;
	document.getElementById(id).style.background = "white";
	id = "scelte"+val;
	document.getElementById(id).style.display="inline";
	temp="titolo"+scelte;
	document.getElementById(temp).style.background = "#66CCCC";
	temp = "scelte"+scelte;
	document.getElementById(temp).style.display="none";
	scelte=val;
}
</script>
il File .CSS
codice:
.titolo { text-align:center; font-family:sans-serif;
font-size:125%; font-weight:bold; color:navy; background:#66CCCC;
width:70%; height:1.2em; border: solid; border-color: navy;
}

.sele
{
	background: white;
}

#stilert
{
	color: black;
	font-size: medium;
	font-weight: normal;
}
http://marcoilsagace.altervista.org/asd.php