Question

我试图在我的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;
}

Answer 1

@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

Answer 2

将您的表格代码写入div

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

 //Table code 

</div>

试着让我知道

如何使用固定标题使表格可滚动

2 个答案: