Question

我正在开发显示表格的php网页，问题是当我滚动表格时，表格覆盖了我的标题。如果我使用固定的页眉，页脚和侧边栏。< / p>

滚动时请帮助使表格不覆盖标题。

这是我的php + html代码：

<!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 * FROM 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>

这是我的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;}

Answer 1

您需要在z-index div。

中添加div#fixedheader

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

滚动时如何让桌子不越位？

1 个答案: