TD -> overflow ?

**ricman** · 08-01-2009, 14:15

Scusate... non sono proprio abituato a usare le tabelle!!
Ma ora ho dei dati da impaginare... Ho un Td con un contenuto (ragione sociale) preso da un Db ed alcune volte risulta essere molto lungo.
Questo mi sciupa l'impaginazione.

Volevo assegnargli quindi una larghezza fissa e nascondere quello che "sporge".

codice:

#tabella1 td.ragsoc {
	width: 100px;
	font-size: 0.8em;
	overflow: hidden;
	white-space: nowrap;
	padding: 0.2em 0.5em 0.2em 0.5em;		
}

il TD è semplice e NON CI POSSO aggiungere altri tag (tipo un Div)
<td class=\"ragsoc\">$ragsoc</td>

Non funziona nè su FF nè su IE ... (naturalmente si comportano diversamente)

**ricman** · 12-01-2009, 14:34

nessuno?

**Mich_** · 12-01-2009, 15:57

Mi sembra strano che non funzioni nemmeno in FF.
Quale DTD stai usando?

Prova ad aggiungere anche:
max-width: 100px;

Invece in IE quirks mode non funziona. Se invece usi lo standard mode (cioe` con la DTD XHTML 1.0 strict) anche IE dovrebbe comportarsi come FF e gli altri.

**ricman** · 13-01-2009, 10:08

Originariamente inviato da Mich_
Mi sembra strano che non funzioni nemmeno in FF.
Quale DTD stai usando?

Prova ad aggiungere anche:
max-width: 100px;

Invece in IE quirks mode non funziona. Se invece usi lo standard mode (cioe` con la DTD XHTML 1.0 strict) anche IE dovrebbe comportarsi come FF e gli altri.

Sto usando XHTML Strict.
Aggiungendo il max-width funziona su FF ma non su IE. Su quest'ultimo il la cella prende la giusta larghezza si allunga in altezza (senza considerare l'overflow) e mi mette il testo su due o più righe.

Ti allego un test...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>prova</title>
<style type="text/css">
#tabella1 {
	border: 1px solid silver;
	/*width: 85%;*/
}

#tabella1 th, #tabella1 td.ragsoc {
	width: 50px;
	max-width: 50px;
}
#tabella1 th {
	background-color: #C8C8C8;
	padding: 0.3em;
	line-height: 1.3em;
}
#tabella1 td {
	padding: 0.2em;
}

#tabella1 td.ragsoc {
	overflow: hidden;
	white-space: nowrap;
} 

</style>
</head>

<body>


<table id="tabella1">
<thead>
	<tr>
		<th nowrap width='100%'>R.Soc</th>
		<th nowrap width='100%'>Altro</th>
	</tr>
</thead>
<tbody>
	<tr class='tr_pari'>
		<td class="ragsoc">Ragione sociale molto lunga Spa</td>
		<td class="nome">Pippo</td>
	</tr>
</tbody>
</table>
	

</body>
</html>

**Mich_** · 13-01-2009, 10:28

Mai mescolare attributi di formattazione HTML con CSS: i browser poi interpretano come vogliono (vedi comportamento diverso di IE rispetto a FF).
Inoltre gli attributi HTML width e nowrap non esistono proprio nella DTD usata.
Vedi ad esempio http://w3schools.com/tags/tag_th.asp

E non ha senso definire due oggetti affiancati larghi ambedue 100%: la loro somma sara` il doppio del contenitore: non ci puo` proprio stare dentro.

Prova a correggere e valida i codici usati (vedi i validatori del W3C - riferimenti tra i "link utili").
Comunque a volte IE (soprattutto il 6) continua a fare i capricci con le larghezze: in tali casi e` necessaria la correzione tramite JS, oppure data la sempre minore importanza di IE6 si puo` anche lasciare che le dimensioni sballino in tale browser (dato che la leggibilita` non e` compromessa).

**ricman** · 13-01-2009, 10:54

Originariamente inviato da Mich_
Mai mescolare attributi di formattazione HTML con CSS: i browser poi interpretano come vogliono (vedi comportamento diverso di IE rispetto a FF).

Quando scrivo io il codice di solito non faccio di queste cavolate. La tabella mi viene costruita con una serie di funzioni che si richiamano una dentro l'altra (una parte me le aveva scritte un amico che lavora in asp e non conosce l'html) e non avevo avuto il coraggio di ritoccare il tutto

Ora sistemo tutto...

Originariamente inviato da Mich_
Prova a correggere e valida i codici usati

Fatto... ma il risultato non cambia...

Originariamente inviato da Mich_
Comunque a volte IE (soprattutto il 6) continua a fare i capricci con le larghezze

So per certo che nessuno usera' quelle pagine con IE6. Solo IE7, FF3 e al limite Safari.

Riscrivo il codice corretto e validato

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>prova</title>
<style type="text/css">
#tabella1 {
	border: 1px solid silver;
	/*width: 85%;*/
}

#tabella1 th, #tabella1 td.ragsoc {
	width: 50px;
	max-width: 50px;
	white-space: nowrap;
}
#tabella1 th {
	background-color: #C8C8C8;
	padding: 0.3em;
	line-height: 1.3em;
}
#tabella1 td {
	padding: 0.2em;
}

#tabella1 td.ragsoc {
	overflow: hidden;
} 

</style>
</head>

<body>

<table id="tabella1">
<thead>
	<tr>
		<th>R.Soc</th>
		<th>Altro</th>
	</tr>
</thead>
<tbody>
	<tr class='tr_pari'>
		<td class="ragsoc">Ragione sociale molto lunga Spa</td>
		<td class="nome">Pippo</td>
	</tr>
</tbody>
</table>
	
</body>
</html>

**simonerocchi** · 20-01-2009, 20:07

Originariamente inviato da ricman
Quando scrivo io il codice di solito non faccio di queste cavolate. La tabella mi viene costruita con una serie di funzioni che si richiamano una dentro l'altra (una parte me le aveva scritte un amico che lavora in asp e non conosce l'html) e non avevo avuto il coraggio di ritoccare il tutto

Ora sistemo tutto...

Fatto... ma il risultato non cambia...

So per certo che nessuno usera' quelle pagine con IE6. Solo IE7, FF3 e al limite Safari.

Riscrivo il codice corretto e validato

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>prova</title>
<style type="text/css">
#tabella1 {
	border: 1px solid silver;
	/*width: 85%;*/
}

#tabella1 th, #tabella1 td.ragsoc {
	width: 50px;
	max-width: 50px;
	white-space: nowrap;
}
#tabella1 th {
	background-color: #C8C8C8;
	padding: 0.3em;
	line-height: 1.3em;
}
#tabella1 td {
	padding: 0.2em;
}

#tabella1 td.ragsoc {
	overflow: hidden;
} 

</style>
</head>

<body>

<table id="tabella1">
<thead>
	<tr>
		<th>R.Soc</th>
		<th>Altro</th>
	</tr>
</thead>
<tbody>
	<tr class='tr_pari'>
		<td class="ragsoc">Ragione sociale molto lunga Spa</td>
		<td class="nome">Pippo</td>
	</tr>
</tbody>
</table>
	
</body>
</html>

In effetti con Firefox funziona perfettamente.
Il problema è che non funziona con Camino...e a me serviva una cosa del genere, ma da visualizzare di sicuro anche con Camino!!

Discussione: TD -> overflow ?

Strumenti discussione

Ricerca discussione

Visualizza

TD -> overflow ?

Permessi di invio