tabella con colonne a dimensione fissa

[sarav]

Ciao a tutti,
ho una tabella con colonne a dimensione fissa. Esempio: la prima colonna contiene un codice alfanumerico e l'ho impostata a 100 px.
La tabella viene riempita con dei dati dei quali a priori io non so la dimensione, e se mi capita un codice alfanumerico molto, molto lungo, nel quale non ci sia neanche uno spazio, insomma una stringa più lunga di 100pixel, la prima colonna della tabella si allarga automaticamente al fine di contenere tutta la stringa.

Questo, per il layout della mia pagina è un vero disastro!
La mia colonna deve rimanere di 100pixel!

Non c'è un modo per far si che se la stringa da visualizzare in una cella supera la dimensione della colonna venga troncata oppure (meglio) venga mandata a capo?

Grazie

[var]

prova così:

<td style="max-width:100px;">

ciao

[sarav]

Ho provato ma non cambia niente

[Marcolino's]

Originariamente inviato da var
prova così:

<td style="max-width:100px;">

ciao

E questo dove l'hai trovato

E' normale che la tabella si allunghi o si allarghi o tutte e due, il motivo è che è fatta per poter contenere tutto ciò che ciò infili dentro.
Sul Web, bisogna imparare a contare, c'è una sola dimensione che è lasciata libera, ovvero la dimensione verticale, le larghezze dovrebbero rimanere fisse, ma una progettazione errata porta alla comparsa delle barre laterali.
Bisogna imparare a contare i pixel, se vuoi sempre un buon risultato.
Considera questo, la dimensione width o height di una tabella, si riferisce sempre alla dimensione minima.

Cosa puoi fare nel tuo caso, abbandonare le tabelle per i più performanti livelli, ma se non conosci le tecniche con i fogli di stile ti squagli, in una cosa nuova che non puoi imparare in un tempo ragionevolmente breve.
Usare una tecnica mista: fogli di stile e impaginazione classica, è un approccio sbagliato ma risolve i problemi come il tuo.
Quindi, nella cella dove vanno i tuoi dati, modifica l'intestazione dell'elemento td in questo modo:

<td style='display: block; width: 200px; height: 200px; overflow: auto'>
... Roba che ci va dentro ....
</td>

in questo modo, al suo interno, quando ciò che ci va a finire eccede le dimensioni preimpostate, 200 pixel per 200 pixel, che ovviamente puoi cambiare, compaiono le barre di scorrimento come se fosse un iframe, permettendo la lettura del messaggio, senza che il layout della pagina si modifichi.

[Jerry Masslo]

Originariamente inviato da Marcolino's
..
<td style='display: block; width: 200px; height: 200px; overflow: auto'>
... Roba che ci va dentro ....
</td>

ma l'hai provato? funziona sicuramente coi div anche dentro le celle ma così non mi sortisce nessun effetto.

[sarav]

Niente da fare, anche così non funziona.
Tutto rimane invariato: la barra di scorrimoento non compare. E anche se comparisse non sarebbe la soluzione adatta al mio caso perchè così facendo la cella rimarrebbe della larghezza giusta ma mi aumenterebbe in altezza, mentre io ho bisogno che tutte le righe siano della stessa altezza (si lo so sono esigente... )

[Jerry Masslo]

Originariamente inviato da sarav
Niente da fare, anche così non funziona.
Tutto rimane invariato: la barra di scorrimoento non compare. E anche se comparisse non sarebbe la soluzione adatta al mio caso perchè così facendo la cella rimarrebbe della larghezza giusta ma mi aumenterebbe in altezza, mentre io ho bisogno che tutte le righe siano della stessa altezza (si lo so sono esigente... )

se dentro la cella metti un div e dai al div quel codice funziona, sia in altezza che larghezza

[var]

Originariamente inviato da Marcolino's
E questo dove l'hai trovato

http://www.w3schools.com/css/pr_dim_max-width.asp

CSS2.

[sarav]

Originariamente inviato da Jerry Masslo
se dentro la cella metti un div e dai al div quel codice funziona, sia in altezza che larghezza

Ok è vero, con il div dentro la cella che contiene la stringa troppo lunga e non contenente neanche uno spazio (esempio: 1010330031432114333124116746):



<TD>
<DIV
style='display : block;
width : 100px;
height : 10px;
overflow: auto'>

1010330031432114333124116746

</DIV>
</TD>


Compaiono le barre di scorrimneto.
Problema: siccome io imposto l'altezza della riga (lo devo fare perchè le righe della mia tabella devono avere tutte la stessa altezza), ovviamente, come si vede nell'esempio, imposto anche l'altezza del DIV che metto dentro la cella.
Il risultato è che se tale altezza è inferiore allo "spessore" della barra di scorrimento orizzontale (spessore che dipende dalle impostazioni del browser) vedo solo la barra di scorrimento orizzontale.

Non c'è un modo per avere un DIV con le stesse caratteristiche di uno con le barre di scorrimento (cioè che mantiene le sue dimensioni invece che adattarsi al testo che contiene) ma che non visualizza le barre di scorrimento?


Non ditemi di disabilitare le scrollbar a livello di pagina intera perchè la mia tabella è racchiusa in un div con le barre di scorrimento che devono rimanere.

[Jerry Masslo]

Originariamente inviato da sarav
...
Problema: siccome io imposto l'altezza della riga (lo devo fare perchè le righe della mia tabella devono avere tutte la stessa altezza), ovviamente, come si vede nell'esempio, imposto anche l'altezza del DIV che metto dentro la cella.
Il risultato è che se tale altezza è inferiore allo "spessore" della barra di scorrimento orizzontale (spessore che dipende dalle impostazioni del browser) vedo solo la barra di scorrimento orizzontale.

Non c'è un modo per avere un DIV con le stesse caratteristiche di uno con le barre di scorrimento (cioè che mantiene le sue dimensioni invece che adattarsi al testo che contiene) ma che non visualizza le barre di scorrimento?


Non ditemi di disabilitare le scrollbar a livello di pagina intera perchè la mia tabella è racchiusa in un div con le barre di scorrimento che devono rimanere.

il sistema c'è ma la parte eccedente verrebbe nascosta, cioè invece di dare auto puoi dare hidden, ma se il testo supera i limiti imposti non compaiono barre ma la parte eccedente non è raggiungibile.

a meno di non ricorrere a javascript, lasciare il div con l'hidden, dare alla cella un position:relative e dare al div un onmouseover che dà al div un position:absolute e imposti altre proprietà in modo che diventi tutto visibile con barre o no.