Ciao!

Nella mia pagina web ho una navbar e l'intestazione della tabella fisse in alto in modo che quando scorro le righe della tabella vedo sempre navbar e intestazione. Sono riuscito a farlo, solo che l'intestazione della tabella si comprime e non "vede" il width:100% (che invece vede il resto della tabella), sembra proprio colpa del position:fixed solo che non riesco a trovare un modo per farlo adattare, ho provato di tutto ma non riesco a fare il width:100%

se tolgo il position:fixed nella classe testata si adatta correttamente ma perdo la caratteristica di restare fissa.

IL codice è il seguente:
(uso bootstrap e ho tolto quasi tutte le righe della tabella per semplicità, mentre il style è provvisoriamente dentro html)


codice:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Starter Template</title>
  <!-- Fogli di stile -->
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <link href="css/stili-custom.css" rel="stylesheet" media="screen">
  <!-- Modernizr -->
  <script src="js/modernizr.custom.js"></script>

 </head> 
  
<style type="text/css"> 
/*il div che contiene lo scroll*/
.article {


 overflow-y:auto;
 overflow-x:hidden;
}
/*la tabella*/
.article table {
 border-collapse:collapse;
}


/*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;


}
/*correggo la prima riga della tabella*/
.article table .primariga {
 padding-top:40px;
}
table{
 width:100%;
}
body {
padding-top: 50px;
}


</style>
  
 <body>
    <nav id="menu" class="navbar navbar-default navbar-fixed-top">    <!--  navbar --> 
    
        <div class="collapse navbar-collapse">  
            <ul class="nav navbar-nav">     
                <li id = "A"><a href="#"> Citta</a></li>
                <li id = "B"><a href="#"> Azienda</a></li>
                <li id = "C"><a href="#"> Verso</a></li>
                <li id = "D"><a href="#"> Reparto </a></li>           
            </ul>
      </div>
    </nav>
 
<div class="article">
 <table   cellspacing="0" cellpadding="0">


  <tr class="testata">
   <th>test</th>
   <th>co1 1</th>
   <th>col 2</th>
   <th>col 3</th>
   <th>col 4</th>
  </tr>
   
  <tr class="primariga">
   <td class="primariga">124</td>
   <td class="primariga">124</td>
   <td class="primariga">23555</td>
   <td class="primariga">346</td>
   <td class="primariga">4575</td>
  </tr>
      
  <tr>
   <td>55</td>
   <td>51</td>
   <td>984</td>
   <td>98456</td>
   <td>984</td>
  </tr>
  <!-- Altre  righe-->
  <tr>
   <td>55</td>
   <td>51</td>
   <td>984</td>
   <td>98456</td>
   <td>984</td>
  </tr>


 </table>
</div>


 <!-- jQuery e plugin JavaScript  -->
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>


 </body>
</html>