Ciao a tutti, anticipatamente grazie a chi mi sapra' aiutare.
Vi spiego il mio problema:
Vorrei riprodurre una tabella con i CSS. Questa tabella puo' succedere che sia piu' larga della larghezza del browser e vorrei pertanto che (in tal caso) compaia la barra di scorrimento orizzontale e non che le celle si spostino sulla riga successiva.
Mi spiego meglio:
Da notare che ogni cella e' larga 100px;codice:<style type="text/css"> body { padding:0; margin:0; } div.grid { overflow:hidden; float:left; overflow-x:auto; } div.row { margin:0px; padding:0px; clear:both; overflow:hidden; overflow-x:auto; white-space:nowarp; } div.cell { float:left; margin:0 0 0 -1; padding:0; position:relative; height:10px; width:100px; font-size:8px; display:block; text-align:center; border:1px solid #dddddd; background:#dddddd; z-index:0; } </style>
Quindi il body...
Cosi' facendo, con una risoluzione di 1024, mi aspettavo che le celle A11 e A12 fossero visualizzate sulla destra della A10 con tanto di scrollbar di scorrimento orizzontale, ma cosi' non e'... sono mandate a capo.codice:<div id='grid'> <div class='row'> <div class='cell'>A1</div> <div class='cell'>A2</div> <div class='cell'>A3</div> <div class='cell'>A4</div> <div class='cell'>A5</div> <div class='cell'>A6</div> <div class='cell'>A7</div> <div class='cell'>A8</div> <div class='cell'>A9</div> <div class='cell'>A10</div> <div class='cell'>A11</div> <div class='cell'>A12</div> </div> <div class='row'> <div class='cell'>B1</div> <div class='cell'>B2</div> <div class='cell'>B3</div> <div class='cell'>B4</div> <div class='cell'>B5</div> <div class='cell'>B6</div> <div class='cell'>B7</div> <div class='cell'>B8</div> <div class='cell'>B9</div> <div class='cell'>B10</div> <div class='cell'>B11</div> <div class='cell'>B12</div> </div> </div>
Dove sto sbagliando?!?
Grazie ancora,
Stefano

Rispondi quotando

