Come far crescere una Tabella al crescere della larghezza delle sue colonne?

[99caos]

Domandona, ma semplice:

ho un contenitore di dimensione fissa con overflow: scroll; vorrei fare in modo che all'aumentare della larghezza delle colonne della tabella la tabella stessa aumenti di larghezza (larghezza totale) in modo che si possa scorrerla nel div che la racchiude (quello appunto con overflow: scroll).

Sono stato chiaro oppure mi sono capito da solo?

[ricman]

Originariamente inviato da 99caos
ho un contenitore di dimensione fissa con overflow: scroll; vorrei fare in modo che all'aumentare della larghezza delle colonne della tabella la tabella stessa aumenti di larghezza (larghezza totale) in modo che si possa scorrerla nel div che la racchiude (quello appunto con overflow: scroll).

Il contenitore è un div?
La tabella cos'è? Dove sta?

[99caos]

per contenitore intendo un elemento del tipo del div (display: block)
per tabella intendo un elemento del tipo table.

Se non esplicito una dimensione alla tabella questa assume come dimensione massima quella del suo contenitore (se il contenuto delle sue celle è modesto, vedi oltre).


Poniamo che:
il contenitore ha width: 500px;
table non ha width espresso
ci sono tre colonne

Se alle celle do una dimensione fissa width: 350px, mi aspetterei che la tabella assumesse una dimensione di 350px per 3, ma invece quello che accade è che le celle vengono dimensionate in funzione della dimensione massima assumibile dalla tabella, che è quella del contenitore, quindi in questo caso 500px/3.

Questo caso prevede che il contenuto delle celle sia inferiore alla dimensione assegnatagli dalla tabella (500px/3 : 166px).

Non posso quindi definire a priori (cioè indipendentemente dal contenuto delle celle) la dimensione delle colonne. Se la somma delle dimensioni delle colonne supera quella del contenitore, questa dimensione semplicemente viene ignorata.

Se invece è il contenuto di una cella ad aumentare, per esempio 200px, le altre celle assumono la dimensione (500px-200px)/2 : 150px, il totale in questo caso resta sempre 500px.

Quindi le celle assumono la dimensione massima del loro contenuto, ignorando la dimensione fissa dichiarata per la cella.
Di conseguenza la dimensione totale della tabella è data dalla somma della dimensione massima del contenuto delle celle.

Solo in questo caso la tabella esplode come vorrei, ossia nel caso in cui la somma della larghezza del contenuto delle celle supera quella del contenitore (500px), e nel contenitore appaiono le barre di scorrimento (per inciso il contenitore ha overflow: scroll; per gestire a priori il ridimensionamento).

I problemi sono i seguenti:

- non posso gestire la larghezza delle colonne a priori come vorrei (essa assume come larghezza massima quella consentita dalla larghezza massima della tabella, o dal suo contenuto).

- anche impostando una larghezza per la tabella superiore al suo contenitore il risultato non cambia, appaiono le barre di scorrimento ma le colonne non usano la larghezza che ho espresso ma quella assegnataloro dalla tabella

- le barre di scorrimento dipendono dal browser usato e la loro larghezza non è prevedibile.


L'ideale sarebbe:

- dichiarare la larghezza del contenitore in modo che sia sempre quella indipendentemente dalla presenza o assenza delle barre di scorrimento

- dichiarare la larghezza delle singole colonne in modo che al superare della larghezza del contenitore appaiano in questo le barre di scorrimento.

Avevo pensato che:

- potrei includere una riga falsa nella quale inserire un contenuto di larghezza voluta

- potrei non usare le tabelle oppure ridefinire il display mode dei suoi elementi.

Spero che così sia più chiaro

[ricman]

Ero meno confuso prima...
Ovvio che un elemento che va oltre le dimensioni del tuo Div (che ha dimensioni fisse e overflow:auto) verrà in parte nascosto/scrollato.
Non ho capito come mai la tua tabella, se le fissi le celle a TOTpx non debba mantenerle... succede solo se ci scrivi qualcosa dentro senza mai lasciare uno spazio.

[99caos]

la larghezza dichiarata per le celle (e quindi per le colonne a cui sono associate), viene rispettata solo fintanto che la somma totale delle larghezze delle celle non supera la larghezza totale della tabella.

nel caso in cui la supera, le celle vengono ridimensionate in proporzione.

nel caso in cui la somma totale sia inferiore, le colonne vengono comunque distribuite per riempire tutto lo spazio messo a disposizione dalla tabella. (cosa che non avviene se non dichiaro la larghezza della tabella).

Per risolvere questo problema avevo pensato di usare javascript per cambiare la larghezza della tabella in funzione della larghezza delle sue colonne.

[ricman]

Originariamente inviato da 99caos
la larghezza dichiarata per le celle (e quindi per le colonne a cui sono associate), viene rispettata solo fintanto che la somma totale delle larghezze delle celle non supera la larghezza totale della tabella.

nel caso in cui la supera, le celle vengono ridimensionate in proporzione.

nel caso in cui la somma totale sia inferiore, le colonne vengono comunque distribuite per riempire tutto lo spazio messo a disposizione dalla tabella. (cosa che non avviene se non dichiaro la larghezza della tabella).

Per risolvere questo problema avevo pensato di usare javascript per cambiare la larghezza della tabella in funzione della larghezza delle sue colonne.

Ma prima hai scritto:

table non ha width espresso

Fallo... togli la larghezza a Table e lascia solo quella per i Td

[99caos]

e se uno disabilita js? mi va in palla tutto!!!

certo, per quello che devo fare è tollerabile, ma che cavolo uffa...

e poi c'è un'altra cosa buffa... in FF mi si incasina lo scorrimento verticale.
visto che il container che contiene table ha overflow: scroll, table (che è più grande del container) mi va sotto gli scroller e nel caso dello scroller verticale quando clicco sulla barra per spostarla mi si seleziona il testo della tabella ed è un casino... su IE7 non lo fa