Newsgroup: it.comp.www.html
Titolo: larghezza delle TD

Ciao a tutti.
Sarà per il lunedì mattina o per la giornata pesante ma mi è sorto questo
dubbio esistenziale: se dichiaro una TABLE con larghezza 500px e all'interno
di questa table dichiaro una sola TR e ancora all'interno di questa tr
dichiaro 4 TD con larghezze 10px, 20 px, 30% e 70%. (vedi codice riportato)
Quali saranno le larghezze in pixel delle ultime due TD?
Saranno rispettivamente di 141 e 329 pixel o saranno invece di 150 e 350
pixel?
Grazie dell'aiuto, ciao.
<HTML>
<BODY>
<TABLE width=500px>
<TR>
<TD width=10px>1</TD>
<TD width=20px>2</TD>
<TD width=30%>3</TD>
<TD width=70%>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 pixel?
in teoria 141 e 329 (se le vuoi cosě precise vedi di settare cellspacing=
"0" e cellpadding="0")

 "0" e cellpadding="0")
Già ed anche border=0 (non si sà mai!)  ;-)
Sempre relativamente alla larghezza delle TD: con questo codice html:
<TABLE border=1 width=500px>
<TR>
<TD style="{width:10px;overflow:hidden;white-space:nowrap}">1 ABCD</TD>
<TD style="{width:20px;overflow:hidden;white-space:nowrap}">2</TD>
<TD style="{width:50px;overflow:hidden;white-space:nowrap}">3</TD>
<TD style="{width:420px;overflow:hidden;white-space:nowrap}">4</TD>
</TR>
</TABLE>
Viene visualizzata una griglia dove però la prima cella non è di 10 px ma è
più lunga perchè si ingrandisce per farci stare tutto il testo contenuto...
Perchè? Insomma ho impostato "overflow:hidden" per cui quello che non ci
sta' dovrebbe semplicemente non venir mostrato ed invece la TD si espande lo
stesso...
Qualcuno mi sa' spiegare dove sbaglio?
Grazie dell'aiuto.
PS: sto' usando Mozilla 1.4

 Già ed anche border=0 (non si sà mai!)  ;-)
.... si vede così tanto che sono niubbina.... sorry... :-)

 Qualcuno mi sa' spiegare dove sbaglio?
Ciao Andrea, il fatto è che le celle delle tabelle non sono elementi block-level,
e quindi non si può applicare l' overflow: 
http://www.w3.org/TR/REC-CSS2/visufx.html
La soluzione? Dato che i td, pur non essendo block level, possono contenere elementi
block-level è: inserire un div nella cella. Esempio:
<td>
    <div style="width:10px; height:10px; overflow:hidden">verrà tagliato...</div>
</td>
Se hai dieci minuti di tempo... in questo articolo parlo del box model e c'è
un paragrafetto anche sull' overflow: "Capire il box model" lo trovi qui:
http://pro.html.it/articoli/id_413/idcat_8/pro.html
Ciao,
    Alessandro Fulciniti


"Sorry"??? E perchè? E' una giusta precisazione!

     Alessandro Fulciniti
Così è tuo quell'articolo... lo conoscevo già e mi è già stato molto d'aiuto
per chiarirmi le idee sul box model; la particolarità del fatto che il td
non è un block level mi era sfuggita!  ;-)
Grazie per il chiarimento... adesso non sò più che pesci pigliare!!!  :-(
Mi spiego meglio: la table in questione la creo dinamicamente da una
libreria php, in pratica questa libreria legge dei file ini diversi a
seconda dei parametri con cui viene richiamata e genera del codice html a
seconda della lunghezza totale della griglia e delle lunghezze in
percentuale delle varie colonne (dati scritti nei file ini) impostando gli
attributi width della table e delle td.
All'interno delle td va' a scrivere dei dati letti da db e devo proteggermi
in modo che se i dati sono troppo lunghi non vadano a "scassarmi" il layout
della griglia...
Purtroppo quindi non posso attribuire il width ad un oggetto div contenuto
nelle td in quanto non conosco il valore della larghezza in px ma solo in %
(ho provato a calcolarmi i px dalla % ma non funziona in maniera perfetta a
causa degli arrotondamenti); insomma per fare un caso pratico avrei bisogno
di assegnare 500px al width della griglia, 100px ad ognuna delle 5 td di
ogni tr della griglia e all'interno di queste td creare dei div con width
100% (lo scopo è che si adattino alla larghezza delle colonne) e con
overflow settato a hidden (il contenuto in eccesso dovrebbe venir tagliato).
Invece con del codice di questo tipo i div adattano la propria larghezza al
contenuto e non all'oggetto padre (in teoria il box model non prevede che
ogni elemento regoli la propria larghezza in % rispetto all'oggetto padre e
non rispetto al suo contenuto???), il risultato è che comunque la colonna si
allarga!
Come potrei ottenere il risultato che ho spiegato? Qualche idea?
Grazie!
    Andrea

 ha scritto nel messaggio
news:buil6q$hlda7$1...@ID-208100.news.uni-berlin.de...

Ho trovato la soluzione!!!! (dopo mezza giornata che "ravano" in 
www.w3c.org
era ora!!!)
Ecco il codice che risolve la questione:
.mainTable {
 overflow: hidden;
 table-layout: fixed;
 white-space: nowrap;
 background-color: Yellow;
 border: 1px solid Blue;
}
<TABLE cellpadding=0 cellspacing=0 class="mainTable" width=500px>
<TR>
<TD class="mainTable" width=10px><DIV>1 asdf rety</DIV></TD>
<TD class="mainTable" width=20px><DIV>2</DIV></TD>
<TD class="mainTable" width=30%><DIV>3</DIV></TD>
<TD class="mainTable" width=70%><DIV>4</DIV></TD>
</TR>
</TABLE>
In pratica tutto si risolve con l'utilizzo dell'attributo table-layout (vedi
http://www.w3.org/TR/REC-CSS2/tables.html#width-layout
 per la spiegazione
dell'attributo).
Settando table-layout a fixed anche l'attributo overflow acquista
significato in quanto impostato a hidden permette di specificare che
l'eventuale contenuto eccedente deve essere nascosto.
Alla prox.
   Ciao!