php - How to make table not offside when scrolling? -


i'm developing web page php show table, problem when i'm scrolling table, table cover header.if i'm using fixed header, footer , sidebar.

please make table not cover header when scrolling.

this php + html code:

<!doctype html> <head>     <link rel="stylesheet" type="text/css" href="css/blended_layout.css">     <title>early warning system</title> </head> <body>     <div id="fixedheader">         <h2>early warning system</h2>     </div>      <div id="fixedsidebar">         hello world!     </div>      <div id="maincontent">         <table cellpadding="5" cellspacing="0" border="1">         <tr bgcolor="#ffffff">             <th>site id actual</th>             <th>site name actual</th>             <th>regional</th>             <th>area</th>             <th>month oa</th>             <th>oa date</th>             <th>harga sewa</th>             <th>durasi sewa</th>             <th>tanggal mulai</th>             <th>tanggal berakhir</th>             <th>opsi</th>         </tr>          <?php         //include file koneksi ke database         include('koneksi.php');          //query ke database dgn select table siswa diurutkan berdasarkan nis paling besar         $query = mysql_query("select * on_air") or die(mysql_error());          //cek, apakah hasil query di atas mendapatkan hasil atau tidak (data kosong atau tidak)         if(mysql_num_rows($query) == 0)         {             echo '<tr><td colspan="6">tidak ada data!</td></tr>';         } else         {             $no = 1;             while($data = mysql_fetch_assoc($query)) {                 echo '<tr>';                     echo '<td>'.$data['site_id_actual'].'</td>';                     echo '<td>'.$data['site_name_actual'].'</td>';                     echo '<td>'.$data['regional'].'</td>';                     echo '<td>'.$data['area'].'</td>';                     echo '<td>'.$data['type_of_opex'].'</td>';                     echo '<td>'.$data['oa_date'].'</td>';                     echo '<td>'.$data['harga_sewa'].'</td>';                     echo '<td>'.$data['durasi_sewa'].'</td>';                     echo '<td>'.$data['tgl_mulai'].'</td>';                     echo '<td>'.$data['tgl_berakhir'].'</td>';                     echo '<td><a href="edit.php?id='.$data['site_id_actual'].'">edit</a> / <a href="hapus.php?id='.$data['site_id_actual'].'" onclick="return confirm(\'yakin?\')">hapus</a></td>';                 echo '</tr>';                  $no++;             }         }         ?>     </table>     </div>      <div id="fixedfooter">         <h5 align="right">&#169; copyright telkomsel 2015</h5>     </div>     </div> </body> 

this css :

body { margin:80px 80px 100px 100px;} div#fixedheader { position:fixed; top:0px; left:0px; width:99%; color:#ccc; background:#333; padding:30px;}  div#fixedfooter { position:fixed; bottom:0px; left:0px; width:99%; color:#ccc; background:#333; padding:10px;}  div#fixedsidebar { position : fixed; left : 0px; width : 15%; height : 90%; color : #ccc; background : #333; padding : 10px;}  div#maincontent { position : relative; left : 15%; width : 84%; height : 90%; color : #000; background : #fff; padding : 10px;} 

you need add z-index in div#fixedheader div.

div#fixedheader {     background: #333;     color: #ccc;     left: 0;     padding: 30px;     position: fixed;     top: 0;     width: 99%;     z-index: 1; /* add */ } 

Comments

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -