CODEWITHSUNDEEP
htmlcss
Giacomo_88
Giacomo_88

Reputation: 1

how to make a table scrollable with fixed header

I tried to copy two tables in my html page but in both cases, the table headers remain fixed in relation to the whole html page instead of remaining fixed only respect to the associated tables of belonging. How can I solve the problem?
I would like to continue using only html code if possible ...

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Menu Principale</title>
<link rel="stylesheet" type="text/css" href="stylemenu3.css" />
</head>
<body>
<div class="main" id="container">
<!--  div id="container" style="width:1024px"-->

<form name="form0" method="post" action="#">
 <!-- messaggio iniziale -->

<div class="top" id="header">
<h1>MESSAGGI RICEVUTI</h1></div>

<!-- caselle di testo per filtrare messaggi -->
    <table id="ricercaMessaggio" border="1">
      <tbody>
        <tr>
          <td style="width: 354px; height: 100px; text-align: left; vertical-align: top; background-color: #F0DC82;">
            <!--h2><span style="color:#211ed6 ;">RICERCA MESSAGGIO</span></h2-->
        <font size="4" ><b>RICERCA MESSAGGIO</b></font>


                <table width="279" border="0" cellpadding="0" cellspacing="5" class="text" style="MARGIN-LEFT: 10px; MARGIN-TOP: 18px">
      <tr>
        <td height="32" align="left" valign="top"><font size="2"> <!--color="#211ed6"--><b>MITTENTE</b></font><br>
            <input name="txtMittente" type="text" class="box" id="txtMittente" size="20">
        </td>

        <td align="left" valign="top"><font size="2"> <!--color="#211ed6"--><b>OGGETTO</b></font><br>
            <input name="txtOggetto" type="text" class="box" id="txtOggetto" size="20">
        </td>

        <td align="left" valign="top"><font size="2"> <!--color="#211ed6"--><b>PAROLA CHIAVE</b></font><br>
            <input name="txtParolachiave" type="text" class="box" id="txtParolachiave" size="20">
    </td>
        </tr>
      </table>  
        <input type="submit" class="bottone" value="Ricerca">
    <input type="reset" class="bottone" value="Cancella">
    <!-- Trovare il tasto di aggiornamento e metterlo al posto di #### -->
    <!--a href="#" class="bottone" target="_self">Aggiorna la pagina!</a>-->
    <INPUT TYPE="button" class="bottone" VALUE="Aggiorna" target="_self">  <!--ONCLICK="history.go(0)"-->
    <!--input type="######" class="bottone" value="Aggiorna"-->
        </tr>
      </tbody>
    </table>


 <!-- Menu a sinistra per filtrare i messaggi e scriverne uno nuovo -->   
<div class="colsx">
<font size="4" color="#FFD700"><b>MENU</b></font><br> 
<ul id="menu" class="active" background-color:#66CC33>    
    <li><a href="#">NUOVO MSG 1</a></li> 
    <li><a href="#">NUOVO MSG 2</a></li>    
    <li><a href="#">BOZZE</a></li>    
    <li><a href="#">POSTA INVIATA</a></li>    
    <li><a href="#">RICEVUTI</a></li>
    <li><a href="#">LOGOUT</a></li> 
</ul>




 <!-- Menu a sinistra contenente persone connesse -->    
<font size="4" color="#FFD700"><b> Connesse</b></font><br> 
<ul id="pattuglieconnesse" class="active">    
    <li><a href="#">ALFA</a></li>    
    <li><a href="#">BRAVO</a></li>    
    <li><a href="#">CHARLIE</a></li>    
    <li><a href="#">DELTA</a></li>
    <li><a href="#">ECHO</a></li> 
</ul>

</div>

<div class="iframePratiche">
  <!-- dati da elaborare con sql da qui -->
<table cellpadding="0" cellspacing="0">
  <tr id="intestazioneiframepratiche">
  <!-- questi 4 saranno i link per inoltrare messaggio, rispondere, selezionare ecc... -->
    <th width="22" height="20" align="left" id="seleziona" valign="middle"></th>        <!--&nbsp; position= "fixed"; -->
    <th width="22" height="20" align="left" id="rispondi" valign="middle"></th>     <!--&nbsp; position= "fixed"; -->
    <th width="22" height="20" align="left" id="inoltra" valign="middle"></th>      <!--&nbsp; position= "fixed"; -->
    <th width="22" height="20" align="left" valign="middle"></th>       <!--&nbsp; position= "fixed"; -->
    <th width="150" align="left"><a href="#">MITTENTE</a></th>                              <!--poi inserire class="ordine"-->
    <th width="170" align="left"><a href="#">OGGETTO</a></th>               <!--poi inserire class="ordine"-->
    <th width="20" align="left"><a href="#" >ALLEGATI</a></th>              <!--poi inserire class="ordine"-->
    <th width="70" align="left"><a href="#" >DATA</a></th>          <!--poi inserire class="ordine"-->
  </tr>
  <tr>
    <td width="22" height="20" align="left" valign="middle"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" id="rispondi" valign="middle"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" id="inoltra" valign="middle"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150">ALFA</td>
    <td width="170">AB4563VH</td>
    <td width="20" >allegati</td>
    <td width="70" >05-11-2008</td>
  </tr>
 <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">BRAVO</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">CHARLIE</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">DELTA</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">ECHO</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">FOXTROT</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">GOLF</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">HOTEL</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">INDIA</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">JULIET</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">KILO</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
  <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">LIMA</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
   <tr>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="selezionaMsg.html"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="importante.html"><img src="#.gif" alt="importante" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="rispondi.html"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></a></td>
    <td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><a href="inoltra.html"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></a></td>
    <td width="150" bgcolor="#F2F2F2">MIKE</td>
    <td width="170" bgcolor="#F2F2F2">AB4563VH</td>
    <td width="20"  bgcolor="#F2F2F2">allegati</td>
    <td width="70" bgcolor="#F2F2F2">05-11-2008</td>
  </tr>
  <!-- dati da elaborare con sql fino a qui -->
</table>
</div>
<div class="article">
 <table cellspacing="0" cellpadding="0">
  <tr class="testata">
   <th width="52" class="colonna" scope="col">test</th>
   <th width="62" class="colonna" scope="col">co1 1</th>
   <th width="122" class="colonna" scope="col">col 2</th>
   <th width="102" class="colonna" scope="col">col 3</th>
   <th width="102" class="colonna" scope="col">col4</th>
  </tr>
  <tr class="primariga">
   <th width="52" class="primariga" scope="row">aaa
   <td width="62" class="primariga">124</td>
   <td width="122" class="primariga">23555</td>
   <td width="102" class="primariga">346</td>
   <td width="102" class="primariga">4575</td>
  </tr>
  <tr>
   <th scope="row">bbb</th>
   <td>51</td>
   <td>984</td>
   <td>98456</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">ccc</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ddd</th>
   <td>51</td>
   <td>23434</td>
   <td>5456</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">eee</th>
   <td>18</td>
   <td>835</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">fff</th>
   <td>1</td>
   <td>6513535</td>
   <td>833</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">ggg</th>
   <td>19</td>
   <td>8135</td>
   <td>854</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">hhh</th>
   <td>51</td>
   <td>651</td>
   <td>33456</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">iii</th>
   <td>15</td>
   <td>1535</td>
   <td>1456456</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">lll</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">mmm</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">nnn</th>
   <td>651</td>
   <td>6513</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ooo</th>
   <td>51</td>
   <td>651</td>
   <td>54545</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">ppp</th>
   <td>18</td>
   <td>84545</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">qqq</th>
   <td>1</td>
   <td>651</td>
   <td>8545</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">rrr</th>
   <td>19</td>
   <td>81</td>
   <td>8</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">sss</th>
   <td>51</td>
   <td>651</td>
   <td>3</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">ttt</th>
   <td>15</td>
   <td>15</td>
   <td>1</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">uuu</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">vvv</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">zzz</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
 </table>
</div>

<div class="clearer"></div>




 <!-- inserire un metodo PER CVONTEGGIARE PAGINE -->
 <!-- width="960" border="0" cellpadding="0" cellspacing="0" -->
<table  class="text" style="MARGIN-LEFT: 10px; MARGIN-TOP: 10px">
        <tr>
          <td width="376" align="right"><a href="#" class="link">$PagPrec;</a></td>
          <td width="225" align="center">( <strong>$ConteggioPagine;</strong> )</td>
          <td width="206" align="left"><a href="#" class="link">$PagSucc;</a></td>
          <td width="153">Risultati per pagina
              <select name="selNumRis" class="combo">
                <option value="100">100
                <option value="200">200
                <option value="300">300                
              </select>
          </td>
        </tr>
</table>
<div class="bottom" id="footer" >
Giacomo</div>
</form>
<!--/div-->
</div>
</body>
</html>

CSS

body { 
    font-family: font_name, Verdana, sans-serif;
    font-size: 11px; 
    margin: 0px; 
    padding: 0px; 
    height: 100%;
    background-color: #111;
    background-image: url("Sfondi/EI1.jpg"); 
    background-repeat: repeat;
    overflow: auto;
    }

.main { 
    height: 100%;
    width:1024px;

    }

.top { 
    height: 20%; 
    border-bottom: 1px solid #555; 
    padding: 4px; 
    /*background-color:#FFA500;*/
    }

/* Stili per i menu della colonna sx */      
.colsx { 
    float: left; 
    width: 150px; 
    border-right: 1px solid #555; 
    height: 80%; 
    padding: 4px;
    }
/* Stili per la parte dx */         
.content { 
    width: 852px;
    letter-spacing: 2px; 
    line-height: 16px; 
    text-align: justify; 
    padding: 4px;
    float: left;
    }

.bottom {}

.clearer{
        float: none; 
        clear: left
        }
/* Stili per tabella */ 
.iframePratiche { 
    width: 852px; 
    height: 220px; 
    overflow: auto;
    background-color:#F2F2F2;
    border: 1px solid #D3D3D3;
    MARGIN-TOP: 30px;
    MARGIN-LEFT: 10px;
    float:left;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    text-decoration: none;
        }

.text {}
.ordine {
    bgcolor="#1da220"
    }
.bottone {
    MARGIN-TOP: 10px;
    MARGIN-LEFT: 15px;
    }


#intestazioneiframepratiche{
    background-color:#7BA05B;
    position: fixed;
    width: 852px; 
    height: 22px;
    border: 1px solid black;
    MARGIN-TOP: -26px;
    MARGIN-LEFT: 0px;
    float:left;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    text-decoration: none;
    }

#header {
    margin-bottom:0;
    color: #F0E68C; 
    font-weight: bold;
    text-align: center; 
    vertical-align: middle;
    }

#ricercaMessaggio{
    background-image: url("Sfondi/logo.png"); /* Stili per immagine sfondo ricerca messaggio ma non funzxiona */
    width: 1024px; 
    height: 172px; 
    }

#ricevuti{
    background-color:#EEEEEE
    width: 852px; 
    }

#footer {
    background-color:#F0E68C;
    clear:both;
    text-align:center;
    }
#seleziona { background: #1C1C1C url('Sfondi/seleziona.jpg') no-repeat 1px; }
#rispondi { background: #1C1C1C url('Sfondi/rispondi.jpg') no-repeat 1px; }
#inoltra { background: #1C1C1C url('Sfondi/inoltra.jpg') no-repeat 1px; }

/* Stili per il primo menu della colonna sx */      
ul#menu {
        font-family: Verdana, sans-serif;
        font-size: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
ul#menu li {
        background-color: #918151;
        border-left: 5px solid #D3D3D3;
        display: block;
        width: 150px;
        height: 30px;
        margin: 2px 0;
        border-radius: 10px;
    }
ul#menu li a {
        color: #fff;
        display: block;
        font-weight: bold;
        line-height: 30px;
        padding-left: 15px;
        text-decoration: none;
    width: 135px; /* 150px - 15px (padding) */
        height: 30px;
    }
/* Stili per evidenziare elemento quando lo seleziono */    
ul#menu li.active, 
ul#menu li:hover {
        background-color: #D3D3D3;
        border-left: 5px solid #918151;
    }

/* Stili per il secondo menu della colonna sx */    
ul#pattuglieconnesse {
        font-family: Verdana, sans-serif;
        font-size: 12px;
    margin: 0;
        padding: 0;
        list-style: none;
    }
ul#pattuglieconnesse li {
        background-color: #D3D3D3;
        border-left: 5px solid #918151;
        display: block;
        width: 150px;
        height: 30px;
        margin: 2px 0;
    border-radius: 10px;
                        }
ul#pattuglieconnesse li a {
    /*color: #fff;*/
        display: block;
        font-weight: bold;
        line-height: 30px;
        padding-left: 15px;
        text-decoration: none;
        width: 135px; /* 150px - 15px (padding) */
    height: 30px;
    }
/* Stili per evidenziare elemento quando lo seleziono */    
ul#pattuglieconnesse li.active, 
ul#pattuglieconnesse li:hover {
                                background-color: #918151;
                                border-left: 5px solid #D3D3D3;
                                }

/*il div che contiene lo scroll*/
.article {
 height: 355px;
 width: 462px;
 overflow-y:auto;
 overflow-x:hidden;
}
/*la tabella*/
.article table {
 border-collapse:collapse;
}
/*tutte le righe*/
.article table tr {
 height:30px;
}
/*tutte le celle*/
.article table tr td {
 border:1px solid #EBD13F;
 color: #C60;
 background: #F3F4D0;
 text-align:center;
}
/*la colonna di sinistra*/
.article table tr th {
 border: 1px solid #039;
 color:#069;
 background: #D7EBEE;
}
/*la testata riga fissa*/
.article table .testata {
 position: fixed;
}
/*le celle della riga fissa*/
.article table .colonna {
 background-color: green;
 color: white;
 border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
.article table .primariga {
 padding-top:30px;
}

Upvotes: 0

Views: 7727

Answers (2)

IMMORTAL
IMMORTAL

Reputation: 2857

@Vaibs post its correct you can put div and then yours code. my code hope you will get an idea.

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
            <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
            <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
              <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
              <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
              <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
            <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
    </table>
    </div>
</div>

CSS

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

Check it demo

Upvotes: 2

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

Write your table code inside a div 

<div style="height:200px;overflow:auto;">

 //Table code 

</div>

Try and let me know

Upvotes: 1

Related Questions