Tabella fluida

  • Creatore Discussione Creatore Discussione colomber
  • Data di inizio Data di inizio

colomber

Utente Attivo
4 Dic 2012
232
1
18
Ho una tabella con 5 colonne con width:100% quando riduco le dimensioni del browser la tabella si ristringe; quando lo schermo diventa molto piccolo però appare la barra laterale invece volevo senza modificare fisicamente la tabella con i css fare in modo che le colonne diventassero in quel caso da 5 a 4 a 3 man mano che riduco lo schermo , sapete come farecon i soli css?

HTML:
<table>
<tr><td>a</td>b<td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td>b<td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td>b<td>c</td><td>d</td><td>e</td></tr>
</table>


Al momento sono riuscito a trasformare la tabella tutta in un'unica colonna con


HTML:
overflow-x: auto;display: block;
 
Prova così:
Codice:
<body style="overflow:hidden;">
<table width="100%">
<tr><td width="20%" nowrap="nowrap">a</td><td width="20%" nowrap="nowrap">b</td><td width="20%" nowrap="nowrap">c</td><td width="20%" nowrap="nowrap">d</td><td nowrap="nowrap">e</td></tr>
<tr><td width="20%" nowrap="nowrap">a</td><td width="20%" nowrap="nowrap">b</td><td width="20%" nowrap="nowrap">c</td><td width="20%" nowrap="nowrap">d</td><td nowrap="nowrap">e</td></tr>
<tr><td width="20%" nowrap="nowrap">a</td><td width="20%" nowrap="nowrap">b</td><td width="20%" nowrap="nowrap">c</td><td width="20%" nowrap="nowrap">d</td><td nowrap="nowrap">e</td></tr>
</table>
</body>
 
Ultima modifica:
Ti dispiacerebbe dire perchè non funziona? A me funziona benissimo!
 
quando ristringi lo schermo le colonne che non ci stanno nello schermo non vanno a capo ma vengono tagliate (non sono più visibili).


forse mi sono spiegato male é come quando metti due div con float left quando il secondo div non ci sta va a capo, sto cercando di fare lo stesso con le colonne della tabella.
 
Allora togli i nowrap="nowrap"
 
Qui ti sei spiegato male su html.it hai specificato meglio e come ti hanno detto non si può fare, le tabelle non posssono andare a capo con delle celle, bisogna adoperare al posto delle celle i div, non è una cosa difficile!
 

Discussioni simili