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">© 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
Post a Comment