[CSS] dimensionare tabella con css. dove sbaglio?

[rikkardo]

Ciao a tutti,
ho creato una tabella riempita con dei dati prelevati dadatabase.
Io vorrei che la larghezza massima della tabella non superi il 90% della larghezza della finestra.
Inoltre quando i dati in essa non riescono ad essere sufficienti per portare la tabella alla dimensione massima vorrei che essa assuma la dimensione minima in modo che in ogni cella della tabella i singoli dati non vadano a capo.

Tutto questo con un foglio di stile.

Ecco qui quello che ho creato io e che non va:°

/***********************
/* CLASSE table_result*/
.table_result {  font-family: arial, Verdana, sans-serif;
}
.table_result caption { font-size: 11px; text-align: center; padding:2px;
}
.table_result thead td { font-size: 13px; font-weight: bold; text-align: center; padding:2px;
}
.table_result tbody td { font-size: 12px; text-align: center;  padding:2px;
}
.table_result table {width: 90%;}

la tabella nell'html viene inserita così:

<table class=\"table_result\">
contenuto
</table>

[rikkardo]

una cosa che non capisco dal punto di vista teorico:

Ho letto che il tag table possiede fra i tanti attributi:
-)cellspacing
-)cellpadding

Io ho una tabella con molti dati che possono variare di quantità quindi non vooglio lasciare al browser la possibilità di modificare il layout della tabella. Quindi creo una classe:
table.tabella { table-layout:fixed; }
Mi spiegate perchè non posso usare l'attributo cellspacing e cellapdding nel foglio di stile ottenendo:
table.tabella { table-layout:fixed; cellpadding:0px; cellspacing:1px}

Può essere che i vari 'attributi' (o proprietà?) da settare all'interno del foglio di stile non si chiamano allo stesso modo degli attributi del tag al quale la classe fa riferimento?

Devo quindi far riferimento, per quanto riguarda le dimensioni, al Box Model?

[rikkardo]

ho provato a modificare il css nel seguente modo:

table.table_prova {  font-family: arial, Verdana, sans-serif;  table-layout: fixed; border-collapse: collapse;
}

table.table_prova caption { font-size: 11px; text-align: center; 
                            padding:2px; margin:0px; border:0px;
                      

}

table.table_prova thead td { font-size: 13px; font-weight: bold; text-align: center;
                             padding:2px; margin:0px; border:0px;
                             width:10px; height:10px;

}

table.table_prova tbody td { font-size: 12px; text-align: center;
                             padding:2px; margin:0px; border:0px;
                             width:10px; height:10px;

}

non capisco come mai ie6 riduce le dimensioni degli elementi interni alla tabella mentre firefox ignora le impostazioni width e height ...

non capisco se è qustione di incompatibilità oppure ie6 passa sopra un errore mio mentre firefox no.

[Mich_]

Originariamente inviato da rikkardo
una cosa che non capisco dal punto di vista teorico:

Ho letto che il tag table possiede fra i tanti attributi:
-)cellspacing
-)cellpadding

Non piu`. Quelli sono vecchi attributi HTML, che non sono supportati in XHTML; e non hanno senso se si formatta con i CSS.

Io ho una tabella con molti dati che possono variare di quantità quindi non vooglio lasciare al browser la possibilità di modificare il layout della tabella.

Male: non e` una buona idea forzare le scelte del browser e dell'utente. La soluzione migliore (piu` accessibile, piu` usabile e piu` gradita all'utente) e` dare al browser le informazioni complete affinche` faccia lui la formattazione.

Mi spiegate perchè non posso usare l'attributo cellspacing e cellapdding nel foglio di stile ottenendo:
table.tabella { table-layout:fixed; cellpadding:0px; cellspacing:1px}

Quegli attributi non esistono in CSS.
Esistono gli attributi margin e padding applicati alle singole celle (esiste anche il border-collapse)

Devo quindi far riferimento, per quanto riguarda le dimensioni, al Box Model?

Certo. Ricorda anche che il box-model di IE non segue le spcifiche del W3C (quello degli altri browser si`).

[rikkardo]

grazie Mich_ per l'aiuto.

Cosa intendi con forzare le scelte del browser? O meglio in che modo posso fornirgli le info per formattare al meglio il layout della tabella?

Te lo chiedo perchè mi sembra di aver notato che durante l'apertura della pagina IE e Firefox si comportano diversamente: IE prima caria e poi visualizza mentre Firefox visualizza la pagina mentre la sta caricando.

Si nota chiaramente che quando arriva alla riga della tabella nella quale è presente un dato in una cella molto più lungo (circa 10 volte) di quelli sopra di esso vedo che di colpo la dimensione della colonna corrispondente aumenta. IE invece mi presenta subito una tabella formattata meglio e il dato tanto lungo che ho citato prima lo spezza in 4 righe (lo fa andare a capo).

[Mich_]

Puoi inserire una riga di tabella per formattarla, tipo una serie di <th> nelprimo <tr>. Vedi ad esempio il tag <table> e gli altri tag per le tabelle (in pratica quasi tutti quelli che iniziano per t) http://www.w3schools.com/tags/default.asp

Se la riga e` in alto l'effetto di "cambio in corsa" sparisce.

Intanto vediti gli attributi CSS per le tabelle, ad esempio http://www.w3schools.com/css/css_reference.asp#table

Per far andare una stringa su piu` righe, occorre limitare la larghezza della cella (sempre che ci siano spazi nella stringa): attributo max-width (per i browser conformi), con eventuale JS per IE.

[rikkardo]

ti ringrazio per la risposta e soprattutto per i link che mi hai fornito: mi sono utili per altri problemi che incontro ogni giorno

Per far andare una stringa su piu` righe, occorre limitare la larghezza della cella (sempre che ci siano spazi nella stringa): attributo max-width (per i browser conformi), con eventuale JS per IE.

Credo sia qui il problema: le stringhe di testo sono SENZA spazi! Firefox di default non le spezza mentre IE sì

La soluzione per Firefox è JS?

[Mich_]

Non puoi spezzare le stringhe lato server? (basta inserire uno spazio)

JS si tende a non renderlo obbligatorio (esistono, ed esisteranno sempre, browser che non lo supportano o in cui e` disabilitato).

[rikkardo]

sì in effetti è vero, meglio farlo lato server.
Pensavo a un controllo sulla lunghezza della stringa: in caso essa superi una certa soglia, inserisco degli spazi al suo interno ad intervalli uguali alla soglia predefinita-

Ora si tratta di fare a pugni con php VVoVe:

ancora grazie Mich_

[Mich_]

Precisazione: si puo` farlo lato client (con JS); e non e` una cosa difficile: lo schema e` quello che proponi qui sopra.

Solo che a causa dei problemi di accessibilita`, l'idea corrente e` di spostare tutto quanto possibile lato server.