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>
Rispondi quotando