"table-layout:fixed" ma contenuto "td" a capo

**dtg** · 04-08-2008, 17:18

Ciao a tutti,
magari è un problema noto, ma onestamente non ne conosco la soluzione.
Mi aiutate please ?

Il punto è questo:

ho una <table> che vorrei di 300px di larghezza
però se il contenuto di un <td> è troppo grande la tabella si ridimensiona come vuole lei (si allarga) senza rispettare i 300px di larghezza.

Ho provato allora con lo style "table-layout:fixed", la tabella non si allarga ma il contenuto della <td> oltre i 300px semplicemente non si vede più.

Come faccio a forzare la tabella ad essere larga 300px e se il contenuto della <td> è troppo grande continui nella stessa <td> ma a capo?

grazie!

**ybre** · 04-08-2008, 21:17

ciao, potresti postare il css?

**dtg** · 05-08-2008, 09:49

certo:

se faccio questo:

<table STYLE="width: 300px; table-layout: fixed;">
<tr>
<td style="width:200px;">
... contenuto della cella molto lungo ...
</td>
</tr>
</table>

il contenuto della cella viene troncato e ne perdo una parte

se faccio questo (ossia non metto "table-layout: fixed;"):

<table STYLE="width: 300px;">
<tr>
<td style="width:200px;">
... contenuto della cella molto lungo ...
</td>
</tr>
</table>

la dimensione della (200px) cella non viene rispettata e si "allarga" per fare entrare tutto il contenuto

**gengix** · 05-08-2008, 10:22

Cerca di non utilizzare stili inline, ma di separare struttura da presentazione.

Cmq ti posto un esempio di codice che non dovrebbe dare problemi:

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">
<head>
<title>tabelle</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
text-align:center;
}
table {
margin:auto;
table-layout:fixed;
width:300px;
border-collapse:collapse;
border:solid 1px #000;
}
table td {
width:150px;
border:solid 1px #000;
}
</style>
</head>
<body>
	<table>
		<tr>
			<td>contenuto della cella molto lungo</td>
			<td></td>
		</tr>
	</table>
</body>
</html>

**dtg** · 05-08-2008, 12:20

gengix grazie del tuo aiuto ma.. non funziona ancora

il testo nella cella (<td>contenuto della cella molto lungo</td>) viene troncato e non va a capo
(non so se centra nulla, io uso internet explorer 6)

**gengix** · 05-08-2008, 12:29

A me non dava problemi.
Hai provato a copiare interamente il mio codice incluso il doctype?

Se non ti funziona ancora posta interamente il codice, sia di struttura che l'eventuale css.
Il codice postalo anidandolo dentro il tag code ( il # che trovi nel menu della risposta).

**dtg** · 05-08-2008, 12:45

non avevo copiato tutto come mi avevi detto tu.
Dato che però mi hai messo in curiosità, ho provveduto a fare un file php esattamente col tuo codice, riga per riga, il risultato puoi vederlo qui

**gengix** · 05-08-2008, 14:05

Il tuo codice contiene errori di sintassi e di semantica.

- Inserire del testo libero nel body è un errore. Il tuo "Buon compleanno a:" deve essere inserito dentro un elemento.

- Nei link va specificato l'attributo "href", diversamente non ha alcun senso utilizzare questo elemento (errore anche semantico).

Da quello che vedo in qusto caso hai a che fare con una lista di elementi. Semanticamente per scrivere una lista di elementi si uttilizzano gli appositi contenitori (ul o ol). Le tabelle vengono utilizzate per intabellare dati dove vengono definite specifiche e chiare relazioni orizzontali e verticali tra i contenuti delle celle stesse.

In questo caso secondo me utilizzare una tabella può essere evitato e cmq non bisogna fare come hai fatto te, ovvero inserire un elenco lunghissimo annidato dentro un'unica cella. Nel tuo caso vi sono dei problemi di formattazione perchè è come se scrivessi una parola lunghissima priva di spazi e quindi il contenuto "sfonda" il contenitore, ogni voce andrebbe separata.

Al tuo posto farei così:

codice:


Buon compleanno a:</p>
<ul>
	[*]trevisonord
	[*]arturo2005
	[*]freyr_65
	[*]misonr8
	.....[/list]

Se le voci sono link, annida i link dento gli elementi li.

**dtg** · 05-08-2008, 15:13

wooww gengix.

Apprezzo le tue osservazioni e ti ringrazio!

Per quel che riguarda il non utilizzare il tag "<a" quando non c'è "href" pensavo non fosse un problema, immagino sia allora da utilizzare il tag "<div".

Quest'ultimo però mi rimanda a capo dopo ogni nome, proprio come mi suggerisci di fare tu con "<ul>" + "[*]".

Io vorrei evitare di andare a capo dopo ogni nome, perché i nomi potrebbero essere diverse decine, per cui rischio di avere una cella dall'altezza esagerata.
Vorrei invece che venisse riempita una riga dei nomi che entrano in 200px, mandare gli altri nomi a capo, riempire una seconda riga di larghezza 200px, mandare gli altri nomi a capo .. e così via.

Riguardo la tua osservazione:
"
è come se scrivessi una parola lunghissima priva di spazi
"
come mai mi dici così dato che gli spazi invece ci sono?

Ti ringrazio molto per le tue osservazioni, ne faccio tesoro!

**gengix** · 05-08-2008, 15:39

Lascia stare le tabelle e i div, fallo con le liste, avrai codice semanticamente corretto e più leggibile da parte delle tecnologie assistive (screen reader, browser testuali ecc...).

Dai una larghezza all'ul, in questo caso 200px e poi affianche i li uno all'altro, quando verrà raggiunta la dimensione essi andranno a capo automaticamente.

esempio:

codice:

<ul>
	[*]trevisonord
	[*]arturo2005
	[*]freyr_65
	[*]misonr8[/list]

ul {
width:200px;
text-align:left;
}
li {
display:inline;
margin-left:5px;
}
[CODE]

Prova così senza tabelle e div, quest'ultimo al massimo puoi metterlo come contenitore all'ul (non so come deve venire il tuo layout)

Discussione: "table-layout:fixed" ma contenuto "td" a capo

Strumenti discussione

Ricerca discussione

Visualizza

"table-layout:fixed" ma contenuto "td" a capo

Permessi di invio