1. дома
  2. Вопрос и ответ
  3. Как сделать таблицу прокручиваемой с фиксированным заголовком

Как сделать таблицу прокручиваемой с фиксированным заголовком

2013-09-14 3 views
0

Я попытался скопировать две таблицы на моей странице html, но в обоих случаях заголовки таблиц остаются фиксированными относительно всей html-страницы, а не остаются фиксированными только в отношении связанных таблиц принадлежности. Как я могу решить проблему?
Я хотел бы продолжать использовать только HTML-код, если это возможно ...Как сделать таблицу прокручиваемой с фиксированным заголовком

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; 
}

источник

2013-09-14 Giacomo_88

+0

Если бы вы попробовать Google точное название, ты бы получить [эта статья] (http://geekswithblogs.net/freestylecoding/ архив/2011/04/19/html-table-with-fixed-header-and-scrollable-body.aspx) – Itay

+0

Вы не заинтересованы в jquery plugin ?? –

ответ

1

Написать свой стол код внутри div

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

//Table code 

</div>

Попробуйте и дайте мне знать

источник

2013-09-14 10:32:50

2

@Vaibs разместите его правильно, вы можете поместить div, а затем ваш код. мой код надеется, что вы получите представление.

<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

источник

2013-09-14 10:49:24 IMMORTAL

Смежные вопросы

 Смежные вопросы