scrollo su tabelle

**JANUS70** · 29-10-2009, 10:37

Ciao ..
Non riesco a far comparire la barra di scorrimento per il contenuto di una tabella !
Sia che inserisca un'immagine piu' larga della cella, che inserisca del testo che comporti una lunghezza maggiore di quella impostata (height) della tabella stessa .. non compare la barra di scorrimento, ma si riscontra un adeguamento della dimensione della cella (per quanto riguarda una maggior larghezza del suo contenuto), o dell'intera tabella (per quanto riguarda una maggior lunghezza di quanto dichiarato)
Ho provato con 'overflow: auto;' come in un qualsiasi box css .. ma non mi
funziona.
C'è qualcuno che mi può aiutare ?
Spero di essermi spiegato bene.
Grazie mille

**moonba** · 29-10-2009, 11:00

..io fare semplicementeuna cosa del genere,perchè ricordo che non si può applicare direttamente alle tabelle come id.quindi farei così:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type= "text/css">
#box
{

width:300px;
height:100px;


overflow:scroll;
}
</style>
</head>

<body>
<div id="box">
<table>
		<tr>
		<td>prima</td>
		<td>prima</td>

	</tr>
	<tr>
		<td>prima</td>
		<td>prima</td>

	</tr>

<tr>
		<td>prima</td>
		<td>prima</td>

	</tr>
<tr>
		<td>prima</td>
		<td>prima</td>

	</tr>
<tr>
		<td>prima</td>
		<td>prima</td>

	</tr>
<tr>
		<td>prima</td>
		<td>prima</td>

	</tr>





</table>
</div>

</body>
</html>

**JANUS70** · 30-10-2009, 09:43

avevo già provato .. ma non mi funziona !

**moonba** · 30-10-2009, 10:48

a me il codice che ho postato li sopra funziona...

**Migliaccio80** · 30-10-2009, 12:55

Potresti provare a inserire nell'html il tag <iframe>. Per cosa ti serve?

**JANUS70** · 30-10-2009, 19:51

devo trovare il sistema perchè non mi si cambi le dimensioni della tabella !!
(con testo più lungo che non mi si allunghi la tabella)
mi sembra strano che non si riesca a trovare il sistema !!

**JANUS70** · 04-11-2009, 09:34

nessuno che mi sappia rispondere !?

**miki003** · 04-11-2009, 12:25

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#contenitore {
	height: 300px;
	width: 400px;
	overflow: scroll;
}
-->
</style>
</head>

<body>
<div id="contenitore">
<table width="400" border="1" cellspacing="5" cellpadding="5">
  <tr>
    <td width="50%">

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p>
      

a</p></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"></td>
    <td width="50%"></td>
  </tr>
</table>

</div>
</body>
</html>

**JANUS70** · 05-11-2009, 14:37

Chiedo scusa non mi sono spiegato bene ..
io avrei la necessita' che sia l'elemento di una tabella (al limite anche se costituito a sua volta da un'altra tabella) ad adattarsi con lo scroll se il suo contenuto eccede la dimensione .. dimensione pero' assegnata NON con una misura fissa ma con la percentuale
rispetto alla tabella 'padre'.
Nell'esempio che riporto, assegno la larghezza solo al contenitore principale '#container_alfa'
gestendo tutti i suoi contenuti attraverso i margini/padding)

struttura della pagina:

#container_alfa{width: 65em ; -> #header #menu #container #footer
#container {height: 600px;
overflow: auto; -> #navigation #content #extra

assegnando la lunghezza a '#container' (con overflow) esce la barra verticale, che tra l'altro presenta in internet expl. il problema che la barra mi allarga il #container uscendo dai margini .. ma la terza colonna '#extra', che contiene la figura (piu' larga) viene sformata
cambiando la ripartizione delle percentuali della tabella padre (20%-60%-20%)
Io vorrei fare in modo che le percentuali rimanessero invariate e mi uscisse
la barra di scorrimento orrizzontale solo nella terza colonna dove c'è appunto
la figura piu' larga.

spero di essermi spiegato .. :-)

--------------
codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout a due colonne con valori assoluti</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">

<style type="text/css">
/*stili per il layout fisso*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;
background: #666633}

/* -------------------------- */
#container_alfa{width: 65em ;
margin: 0 auto;
border: 0;
padding:0;
background: #666633;
}

/* -------------------------- */
#header{background-color:#666633;
color: #ff0;
margin: 1em 1em 1em;
padding:1em;
border: 2px solid #36c;
text-align: right; }
/* -------------------------- */
#menu {border: 2px solid #36c;
margin : 0 1em 1em;
padding-bottom : 0,1em;
background-color: #663300;
font: normal bold 1.2em/1.6em arial,sans-serif;}

#menu p{color: #FFFFFF;
cursor: default;}
#menu a {color : #999999;
text-decoration: underline}
#menu a:hover {color:#000000;
background-color:#FFCCFF;
text-decoration: none }

/* -------------------------- */
#container {height: 600px;
margin: 1em;padding:0;
border: 6px double #36c;
background: #FFFFCC;
overflow: auto; }

/* --------- */
#navigation{ }
#navigation ul{margin: 1em;padding: 0; list-style-type: none;}
#navigation li{margin: 0;padding: 0}
#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
#navigation a:hover{color: #033;text-decoration: underline}
#navigation a#activelink{color: #033;text-decoration: none}

/* --------- */
#content{
margin: 1em; padding: 0;
background-color: #FFFF99;
}
#content h2{color: #999;
font: bold 1.3em/3px arial,serif;
margin: 0 4.4em;
padding:1em;
border-top: 1px dotted black;
border-bottom: 1px dotted black;}
#content p{text-align: justify;}
#content img{}

/* --------- */
#extra{
margin: 1em;
padding: 0;
background-color: "#CCFFCC";
}

/* -------------------------- */
#footer{margin: 2em 1em 1em;
padding: 0.5em;
border: 2px solid #36c;
background: #FFFFCC
text-align:center;
background-color: #663300; color: #CCFFCC}
#footer a{color: #fff;font-weight: bold;text-decoration: underline}

</style>
</head>

<body>
<div id="container_alfa">
<div id="header">
<table width="100%" border="1" >
<tr align="left" >
<td width="80%"></td>
<td width="20%" valign="middle" >
<h1>Html.it</h1></td>
</table>
</div>

<div id="menu">
<table width="100%" border="6" frame="void" rules="cols" >
<tr align="center" >
<td width="20%">Home</td>
<td width="20%">About</td>
<td width="20%">Archivi</td>
<td width="20%">Contatti</td>
<td width="20%">-m@il me</td>
</table>
</div>

<div id="container">
<table width="100%" border="1" bgcolor="#CCFFCC"
cellpadding="10" cellspacing="10">
<tr>
<td width="20%" bgcolor="#CCFFCC" align="center">
<div id="navigation">
<ul> [*]Home [*]Pillole [*]Contenuti [*]Grafica [*]Linguaggi [*]Webdesign [*]Software [/list]
</div>
</td>
<td width="60%" valign="top" bgcolor="#FFFF99" align="center">
<div id="content">

<h2> Layout a due colonne con posizionamenti assoluti </h2>

Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni
rispetto all' analogo con i float. Questi sono l' accessibilità e delle migliori chanche di
indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio insuperabile: non consente di
avere la colonna di navigazione più lunga della colonna dei contenuti. Se siamo disposti a questa
condizione, a parer mio il layout con posizionamenti assoluti è da preferire.</p>

Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni
rispetto all' analogo con i float. Questi sono l' accessibilità e delle migliori chanche di
indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio insuperabile: non consente di
avere la colonna di navigazione più lunga della colonna dei contenuti. Se siamo disposti a questa
condizione, a parer mio il layout con posizionamenti assoluti è da preferire.</p>

Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni
rispetto all' analogo con i float. Questi sono l' accessibilità e delle migliori chanche di
indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio insuperabile: non consente di
avere la colonna di navigazione più lunga della colonna dei contenuti. Se siamo disposti a questa
condizione, a parer mio il layout con posizionamenti assoluti è da preferire.

</div>
</td>
<td width="20%" bgcolor="#CCFFCC" valign="top">
<div id="extra">
<table width="100%" cellpadding="10" border="1">
<tr height="10%">
<td></td>
</tr>
<tr height="90%">
<td >
[img]arabo.jpg[/img]
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="right"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
</table>
</div>

<div id="footer">
<table width="100%" cellpadding="10">
<tr>
<td width="50%" align="left">Copyright 2007 © Roberto Coin. Design by
HTML.IT </td>
<td width="50%"><div align="right">Condizioni utilizzo | Privacy | Mappa </div></td>
</tr>
</table>
</div>
</div>
</body>
</html>

**JANUS70** · 12-11-2009, 09:26

nessuno mi sa aiutare ?! :master:

Discussione: scrollo su tabelle

Strumenti discussione

Ricerca discussione

Visualizza

scrollo su tabelle

Permessi di invio