Come rendere celle di tabella riducibili con il contenitore senza che fuoriescano?

[Luca_pluatrco]

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

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

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

[Luca_pluatrco]

Ciao,

il problema per cui quando la finestra viene ristretta la tabella si ridimensiona solo parzialmente è dovuto al fatto che in una cella ci sono delle parole lunghe che ne bloccano le dimensioni.

Ho anche provato con table-layout:fixed; e impostando la width delle celle, ma senza risultato.
Come potrei fare che parole lunghe vadano a capo o perlomeno che la tabella venga ridimensionata comunque?

Grazie

[Gufo]

Invece di auto prova ad usare dimensioni in percentuale

[Luca_pluatrco]

Ciao,

ho modificato il file CSS sotto. Ora width:100% per la classe .List.
Ad ogni modo anche usando le % per impstare la dimensione della celle nulla cambia. Il problema è dovuto al fatto che ci sono dei nomi di documenti (visualizzati nella tabela) che sono molto lunghi e non vengono spezzato, poiché sono un'unica parola.

Temo che dovrei realizzare una funzione "ad-hoc" per fare in modo che se tali titoli superano un certo numero di caratteri vengano spezzati su piu' linee.

Altrimenti qualche suggerimento?
Grazie

[paxal78]

Originariamente inviato da Luca_pluatrco
Ciao,

ho modificato il file CSS sotto. Ora width:100% per la classe .List.
Ad ogni modo anche usando le % per impstare la dimensione della celle nulla cambia. Il problema è dovuto al fatto che ci sono dei nomi di documenti (visualizzati nella tabela) che sono molto lunghi e non vengono spezzato, poiché sono un'unica parola.

Temo che dovrei realizzare una funzione "ad-hoc" per fare in modo che se tali titoli superano un certo numero di caratteri vengano spezzati su piu' linee.

Altrimenti qualche suggerimento?
Grazie

se ho capito bene il problema è

<td>testotroppolungotestotroppolungotestotroppolun gotestotroppolungotestotroppolungo</td>

giusto?
nel caso avessi capito prova

<td style="overflow:hidden">testo</td>

ma su IE6 mi sa che non funziona e devi fare

<td><div style="overflow:hidden"></div></td>

[Luca_pluatrco]

Ciao,

ti ringrazio del suggerimento, purtroppo pero' questo mi comporta che ogni cella verrà nascosta (usando overflow:hidden) e ciò non è accettabile o presenterà una scroll bar ( se overflow:auto, ma il risultato sarebbe abbastanza confuso).

Ad ogni modo stamattina ne ho discusso con il team leader e anche lui ha convenuto che la soluzione migliore sembri essere l'introduzione di una scroll bar (tramite overflow:auto) a livello di contenitore.
In questo modo è vero che dovrei scorrere in orizzontale "tutta" la parte nascosta di tabella, ma almeno ho una sola scroll bar.

Grazie ugualmente per il suggerimento!!

[Mich_]

C'e` anche una possibile soluzione tramite l'inserimento di entita` HTML, che spezzano la parola in caso sia troppo lunga: &amp;shy;

Esempio:

<td>testotroppolungot&amp;shy;estotroppolungo&amp;shy;testotroppolungo&amp;shy;testotroppolungo&amp;shy;testotroppolungo</td>

[Luca_pluatrco]

Grazie _Mich,

tali celle sono riempiti dinamicamente attingendo dal DB.
Sarebbe quindi necessario definire una funzione javascript che inserisca tale elemento "­" dopo un certo numero di caratteri.

Tuttavia tale funzione dovrebbe esere invocata per ogni cella della tabella (non note a priori ma definite dinamicamente dall'utente) e per ogni tabella nella pagina corrente, in media ci sono dalle 3 alle 6 tabelle per pagina.

Ciò non comporterebbe una carico eccessivo, considerando che per ogni pagina visualizzata dovrebbe essere invocata la funzione?

(Il contesto applicativo è un CMS che tratta progetti informatici con dati come meetings, tasks, documenti condivisi ecc.)

Grazie nuovamente

[paxal78]

più che lato client, in javascript...farei una funzione lato server visto che attinge da un DB.

diciamo che però avresti il problema di definire il numero di caratteri dopo il quale inserire il tuo "shy" solo che i caratteri non hanno tutti al stessa dimensione a meno che non usi un font monospazio.

cmq...secondo me la soluzione dello scrolling rimane la più efficiente anche in termini di prestazioni e leggibilità...

[Luca_pluatrco]

Utilizzo come font: Calibri a 13px.
Il fatto di stabilire il numero di caratteri è il meno, dato che posso fare alcune considerazioni per ottenere un valore soglia accettabile.

E' l'idea di dover applicare tale funzione ad ogni cella di ogni tabella che non mi entusiasma, dato che, seppur si tratti di un calcolo semplice, può essere ripetuto numerose volte.

Ad ogni modo grazie, al momento sto utlizzando:

overflow-x:auto;
overflow-y:hidden; 
/*Per evitare che in alcuni container venga introdotto lo scroll verticale per un br. 
In teoria non dovrebbe mai essere necessario lo scroll verticale per il box container 
in quanto si utilizza quello a livello di intera pagina*/