Newsgroup: it.comp.www.html
Titolo: tabella: larghezza colonna adatta al contenuto

ho creato questa tabella
 
<table width="100%" border="1">
     <tr><td>nominativo</td><td>data nascita</td></tr>
    <tr><td>silvia rossi</td><td>1/2/1980</td></tr>
    <tr><td>marco milano</td><td>21/2/1984</td></tr>
    <tr><td>maria bianchi</td><td>13/12/1983</td></tr>
</table>
 
come si vede, è formata da due colonne, e deve occupare l'intera 
larghezza della pagina (100%).
Il problema è che la seconda colonna (data nascita) occupa circa il 50% 
della larghezza disponibile, mentre io vorrei che si riducesse/adattasse 
automaticamente per contenere appena le date (tutto lo spazio restante 
va lasciato ai nominativi).
Si può fare?
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente


Il problema è banale probabilmente sei ancora alle prime armi, ti offro 
due soluzioni:
 
soluzione 1: aggiungi il width al primo td che ti capita
 
<table width="100%" border="1">
     <tr><td>nominativo</td><td width="100px">data nascita</td></tr>
    <tr><td>silvia rossi</td><td>1/2/1980</td></tr>
    <tr><td>marco milano</td><td>21/2/1984</td></tr>
    <tr><td>maria bianchi</td><td>13/12/1983</td></tr>
</table>
 
Nota che la soluzione è veramente pessima, è un modo di scrivere pagine 
vecchio e ormai deprecato (mi sa che devi partire dalle basi del css)
 
soluzione 2 (in puro css con l'utilizzo della pseudoclasse nth-child):
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"
http://www.w3.org/TR/html4/strict.dtd
" />
<html>
<head>
/* Il foglio di stile potresti anche linkarlo in un file CSS */
<style>
    table{
	width: 100%;	
     }
    table, td, th{
	border: 1px solid black;	
    }
    td:nth-child(2){
	width: 100px; /* scegliti il width che ti pare */
    }
</style>
<title>Prova Tabella</title>
</head>
<body>
<table>
     <tr><td>nominativo</td><td>data nascita</td></tr>
    <tr><td>silvia rossi</td><td>1/2/1980</td></tr>
    <tr><td>marco milano</td><td>21/2/1984</td></tr>
    <tr><td>maria bianchi</td><td>13/12/1983</td></tr>
</table>
</body>
</html>


 </html>
 
innanzitutto perchè in una pagina html, mettere i commenti in php?
Ad ogni modo perchè width=100px?
Se invece di 'data nascita' volessi mettere semplicemente 'età', e di 
seguito soltanto il numero degli anni, la larghezza della colonna si 
adatterebbe?
Mi pare di no....


 adatterebbe?
 
con width impostato a 100px no, ma c'è scritto "scegliti il width che ti
pare"
 
 
-- 
http://www.maxori.it
 
L'Arte è la capacità di fare cose di nessun valore
e di riuscire a venderle
F. Zappa



 
ok, ma io per la seconda colonna, non voglio una larghezza fissa, ma 
adatta al contenuto.
Se ad esempio la seconda colonna deve contenere solo numeri (tipo: 1, 2, 
3) la sua larghezza deve essere circa il 5% di tutta la tabella (non di 
più).
Il restante 95% lo può occuparare tranquillamente la prima colonna.
Per cui la larghezza della seconda colonna (e di conseguenza anche 
quella della prima) non deve essere fissa, ma dinamica.
 
Ripeto: non fissa ma dinamica (solo la tabella deve essere inchiodata 
alla larghezza della pagina: 100%).
 
Quindi
Larghezza tabella = 100%
Larghezza 2° colonna = larghezza testo in essa contenuto
Larghezza 1° colonna = Larghezza tabella - Larghezza 2° colonna
 
Forse non mi spiego :(


 Forse non mi spiego :(
 
Tu puoi usare due metodi: una larghezza fissa (in pixel), ed una variabile
(%).
Quello che non puoi fare in una pagina html è calcolare le dimensioni
automaticamente, devi usare javascript, oppure un linguaggio dinamico.
 
Max


 colonna = Larghezza tabella - Larghezza 2° colonna
 
td:nth-child(2) {
 width: 100px; /* scegliti il width che ti pare */
 max-width: 5%;
}
 
Alcuni browser potrebbero ignorarla. YMMV.
 
Bye.


 automaticamente, devi usare javascript, oppure un linguaggio dinamico.
 
perfetto, col solo codice html non si può fare (adesso si che siamo 
arrivati al dunque).
A questo punto, vorrà dire che per il momento rinuncerò alla larghezza 
fissa della tabella (100%), in modo che le colonne siano libere di 
stringersi/allargarsi.


 Alcuni browser potrebbero ignorarla. YMMV.
 
vabè per evitare problemi, com'è già detto, tolgo la larghezza fissa 
della tabella


 stringersi/allargarsi.
 
Puoi provare a mettere un valore basso (es. 10px) e poi 
<td nowrap="nowrap">
In questo modo la cella diventerà larga il minino necessario per i suoi
contenuti
 
Max
-- 
http://www.maxori.it
 
L'Arte è la capacità di fare cose di nessun valore
e di riuscire a venderle
F. Zappa


 contenuti
 
si, anche se le due impostazioni concettualmente vanno un po' in 
conflitto: limitare la larghezza di una cella, che allo stesso tempo 
deve all'occorrenza poter visualizzare un testo (anche lungo) sulla 
stessa riga


 contenuti
 
Così è più chiaro:
 
<td width="10" nowrap="nowrap"></td>


 stessa riga
 
Sfrutti una proprietà per sovrascriverne un'altra. Può essere
concettualmente "strano" ma non è un errore.
 
Max
-- 
http://www.maxori.it
 
L'Arte è la capacità di fare cose di nessun valore
e di riuscire a venderle
F. Zappa
