PDA

View Full Version : [HTML] table + div + overflow


asdf
20-05-2008, 11:40
Ciao.
Ho un problema con l'overflow di un div annidato all'interno di una tabella che ha larghezza 100%. Il problema si presenta con firefox 3 e con ie7, mentre con firefox 2 viene visualizzato correttamente.

A causa della tabella l'overflow del div presente al suo interno non funziona, ed il div diventa più largo della pagina (invece che essere largo al 100%).
Non appena tolgo la tabella più esterna l'overflow del div torna a funzionare, lasciando il div largo come la pagina ed aggiungendo uno scroll al suo interno.

Il problema è che la tabella mi serve, perché ci sono altri elementi sulla pagina organizzati grazie ad essa.

Per caso sapete come risolvere il problema?


<table>
<tr height="100%">
<td>
<div style="overflow: scroll;background-color:#00FFFF;width:100%;height:150px;">
<table width="100%" height="100%" cellspacing="0" cellpadding="1" border="0" dojoattachpoint="_table" class="listdivBorder" style="height: 400px;">
<thead><tr><td valign="middle" align="right" style="-moz-user-select: none;" class="">IDMEDICO</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">MEDICO</td><td valign="middle" align="right" style="-moz-user-select: none;" class="">IDPAZIENTE</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">NOMINATIVO</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">DATATRATTAMENTO</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">DATAORAPRESTAZIONE</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">DESCRIZIONE</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">CODICEAIFA</td><td valign="middle" align="right" style="-moz-user-select: none;" class="">QUANTITA</td><td valign="middle" align="left" style="-moz-user-select: none;" class="">DATAPROSSIMASOMM</td><td valign="middle" align="right" style="-moz-user-select: none;" class="">LOCALSERVICE</td><td valign="middle" align="right" style="-moz-user-select: none; " class="selectedUp">Id</td></tr></thead>
<tbody><tr id="0" class=""><td valign="middle" nowrap="" align="right" style="-moz-user-select: none;"/><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;"/><td valign="middle" nowrap="" align="right" style="-moz-user-select: none;">21080</td><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;">MARZIO BABINI</td><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;">06/05/2008</td><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;">06/05/2008</td><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;">ALOPERIDOLO 5F 2MG IM/EV</td><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;"/><td valign="middle" nowrap="" align="right" style="-moz-user-select: none;"/><td valign="middle" nowrap="" align="left" style="-moz-user-select: none;">08/05/2008</td><td valign="middle" nowrap="" align="right" style="-moz-user-select: none;">47</td><td valign="middle" nowrap="" align="right" style="-moz-user-select: none; ">0</td></tr></tbody>
</table>
</div>
</td>
</tr>
</table>


Grazie mille

asdf
23-05-2008, 10:55
up

SigiTM
20-06-2008, 09:23
Ciao,
rispondo a questo topic perché credo che il mio problema sia molto simile a quello di asdf.

Con FF3 ho riscontrato un problema che con gli altri browser non mi capitava.
Ho una tabella molto larga, e vorrei incastrarla, all'interno di un sito con margini ben stabiliti (nell'esempio che vi allego, 600px), in un div che occupa al 100% questi margini e, se la tabella risulta più larga, aggiunge sotto uno scroll orizzontale in modo che non deformi tutto il sito; il div quindi rimane della larghezza stabilita.

Con FF2 e IE7 questo funziona, ma con FF3 no: lo scroll non funziona e la tabella deforma il div (e quindi tutto il sito)

Vi ho preparato un esempio html, dove il div più esterno con width:600px rappresenta una "simulazione" dei margini restrittivi del sito.
Il div sotto (e la tabella in esso contenuta) invece è ciò su cui dovrei agire per raggiungere il mio scopo.

File html: http://metaldetector.altervista.org/sigitm/x.html
Screenshot IE7: http://img57.imageshack.us/img57/623/xie7rt3.png
Screenshot FF2: http://img57.imageshack.us/img57/3579/xff2nc3.png
Screenshot FF3: http://img296.imageshack.us/img296/8925/xff3bp3.png

Secondo voi si riesce a modificare in modo che anche in FF3 funzioni?
O è proprio un errore nel motore di rendering di FF3?

Grazie.:)