Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

tabella: larghezza colonna adatta al contenuto

3,065 views
Skip to first unread message

alex

unread,
Mar 9, 2012, 7:22:30 AM3/9/12
to
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

michelebonsignore

unread,
Mar 11, 2012, 5:01:57 AM3/11/12
to
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>

alex

unread,
Mar 14, 2012, 4:24:28 AM3/14/12
to
On 11/03/2012 10.01, michelebonsignore wrote:
> <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>

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....

MacMax

unread,
Mar 14, 2012, 6:09:34 AM3/14/12
to
alex <1j94...@sneakemail.com.invalid> wrote:

> innanzitutto perchè in una pagina html, mettere i commenti in php?

/**/ non sono commenti solo del php

> Ad ogni modo perchè width=100px?

C'è scritto "scegliti il width che ti pare", 100px è solo un esempio.

> Se invece di 'data nascita' volessi mettere semplicemente 'età', e di
> seguito soltanto il numero degli anni, la larghezza della colonna si
> 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

alex

unread,
Mar 14, 2012, 7:45:06 AM3/14/12
to
On 14/03/2012 11.09, MacMax wrote:
> alex<1j94...@sneakemail.com.invalid> wrote:
>
>> innanzitutto perchè in una pagina html, mettere i commenti in php?
>
> /**/ non sono commenti solo del php

e allora perchè il browser me lo visualizza?

> con width impostato a 100px no, ma c'è scritto "scegliti il width che ti
> pare"
>
>

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 :(

MacMax

unread,
Mar 14, 2012, 8:18:52 AM3/14/12
to
alex <1j94...@sneakemail.com.invalid> wrote:
> On 14/03/2012 11.09, MacMax wrote:
>> alex<1j94...@sneakemail.com.invalid> wrote:
>>
>>> innanzitutto perchè in una pagina html, mettere i commenti in php?
>>
>> /**/ non sono commenti solo del php
>
> e allora perchè il browser me lo visualizza?

Quei commenti non vengono visualizzati se li usi dove devi, javascript,
css, php.
Se li metti nel codice HTML li vedi invece.

>
>> con width impostato a 100px no, ma c'è scritto "scegliti il width che ti
>> pare"
>>
>>
>
> 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 :(

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

Alessandro Pellizzari

unread,
Mar 14, 2012, 9:25:17 AM3/14/12
to
Il Wed, 14 Mar 2012 12:45:06 +0100, alex ha scritto:

> Larghezza tabella = 100%
> Larghezza 2° colonna = larghezza testo in essa contenuto Larghezza 1°
> 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.

alex

unread,
Mar 14, 2012, 11:47:02 AM3/14/12
to
On 14/03/2012 13:18, MacMax wrote:
> Quei commenti non vengono visualizzati se li usi dove devi, javascript,
> css, php.
> Se li metti nel codice HTML li vedi invece.

appunto, o si mettono nel punto giusto, o si scrivono nella forma
prevista dal contesto (i commenti si devono vedere solo a livello di codice)

> 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.

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.

alex

unread,
Mar 14, 2012, 11:49:42 AM3/14/12
to
On 14/03/2012 14:25, Alessandro Pellizzari wrote:
> td:nth-child(2) {
> width: 100px; /* scegliti il width che ti pare */
> max-width: 5%;
> }
>
> Alcuni browser potrebbero ignorarla. YMMV.

vabè per evitare problemi, com'è già detto, tolgo la larghezza fissa
della tabella

MacMax

unread,
Mar 14, 2012, 11:54:25 AM3/14/12
to
alex <1j94...@sneakemail.com.invalid> wrote:

> 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.

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

alex

unread,
Mar 14, 2012, 12:10:59 PM3/14/12
to
On 14/03/2012 16:54, MacMax wrote:
> 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

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

MacMax

unread,
Mar 14, 2012, 12:13:47 PM3/14/12
to
MacMax <mac...@nospam.it> wrote:

> 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

Così è più chiaro:

<td width="10" nowrap="nowrap"></td>

MacMax

unread,
Mar 14, 2012, 12:25:02 PM3/14/12
to
alex <1j94...@sneakemail.com.invalid> wrote:

> 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

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
0 new messages