Overflow

**parzi** · 29-12-2011, 17:39

Salve a tutti!

Ho il seguente problema.
Mi trovo in questa situazione.

<div>
<div>blabla</div>
<table>tabella</table>
<div>blabla</div>
</div>

La tabella visualizza svariati tipi di dati quindi la sua width è variabile, può diventare anche più grande della width del genitore.
Quindi ho aggiunto la proprietà overflow:auto al div più esterno.

Il problema è che gli altri div quando la table va in overflow non si adattano alla larghezza della tabella nonostante abbia messo width:100% cioè i div restano della stessa width dichiarata nel div parente e l'overflow per loro è come se non esistesse.

Qualcuno sa dirmi come far in modo in caso di overflow che i div interni e la tabella abbiano la stessa width?

Grazie mille ^_^

**parzi** · 30-12-2011, 17:18

Nessuno lo sa?? E' un caso cosi particolare?? Io non sono un web designer, non me ne intendo molto ma pensavo fosse una cosa piuttosto semplice.. Sbaglio?

**Mich_** · 02-01-2012, 09:48

Non dai info sufficienti per poterti aiutare.

Intanto il 100% e` una misura relativa: vuol dire che si riferisce a qualcos'altro: se questo non e` definito e` un dato inutile (che viene interpretato - o non-interpretato - a piacimento dai vari browser)

Per avere un aiuto concreto, posta la formattazione di:
html
body
tutti gli oggetti che contengono il tuo <div>
il <div> esterno
il <div> interno

(oppure posta un link alla pagina, se disponibile)

**parzi** · 02-01-2012, 19:40

Mi è difficile postare i dati in maniera dettagliata in quanto ho una marea di cose in quella pagina, ho preferito creare un esempio e rendere il tutto piu semplice.

codice:

<!DOCTYPE html>
<html xmls="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
	<div style="width:400px;height:400px;overflow:auto">
		<div style="width:100%;background-color:#0000FF"> Barra di ricerca  </div>
		<table style="background-color:#FF0000">
			<thead>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
				<th>Prova</th>
			</thead>
			<tbody>
				<tr>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
					<td> Contenuto </td>
				<tr>
			<tbody>
		</table>
		<div style="width:100;background-color:#0000FF"> Footer </div>
	<div>
</body>
</html>

Come puoi vedere i due div di colore blu al momento dell'overflow della tabella non diventano della stessa larghezza. Mi sai dire come far in modo che i div abbiano la stessa largezza della tabella?

ps: io ho usato google-chrome e firefox per il test e su entrambi da lo stesso problema.

Grazie mille!

**parzi** · 06-01-2012, 11:10

Nessuno ha mai incontrato una situazione del genere?? non ci credo ^_^

**Mich_** · 09-01-2012, 17:16

Anzitutto quel codice contiene errori: Hai inserito una serie di <th> senza il <tr> corrispondente.

E poi per formattare una tabella, devi usare i tag <col> e/o <colgroup>: in tal modo dichiari al browser che le varie colonne vanno formattate: altrimenti i browser interpretano a modo loro.

PS: Il codice CSS andrebbe inserito in area separata dall'HTML: il CSS in linea non riesce a formattare tutto e crea confusione nello sviluppatore

**parzi** · 12-01-2012, 00:41

Ho aggiunto la tr mancante e ho provato a lavorare nella direzione in cui mi hai suggerito ma proprio non riesco a risolvere.
Potresti darmi qualche dritta a livello di codice?

Grazie mille..

**LuigiMem** · 12-01-2012, 02:25

io non so se ho ben capito il tuo problema ma per quello che vedo (se ho capito)
basta fare cosi...inutile nemmeno spiegarlo:

<!DOCTYPE html>
<html xmls="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div style="width:400px;height:400px;overflow:auto">
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#FF0000">
<thead>
<tr>
<th colspan="12" align="left" bgcolor="#0000FF">
<div style="width:100%;background-color:#0000FF"> Barra di ricerca </div></th>
<tr>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<th>Prova</th>
<tbody>
<tr>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<td> Contenuto </td>
<tr>
<td colspan="12" bgcolor="#0000FF"><div style="width:100;background-color:#0000FF"> Footer </div></td>
<tbody>
</table>
<div>
</body>
</html>

fammi sapere, forse non ho capito

ciao

Discussione: Overflow

Strumenti discussione

Ricerca discussione

Visualizza

Overflow

Ciao Parzi

Permessi di invio