为什么我的页面在表格前显示页脚?

时间:2016-06-20 13:23:08

标签: html

我试图让上面的表格显示在页眉和页脚之间,虽然它显示在页脚下,但我无法理解为什么?任何帮助一如既往的赞赏..

Screenshot!

该页面的代码如下:

    <header>        
        <h1>PRODUCT MANAGEMENT</a></h1>
        <h2>By Bradley Boothman</a></h2>
    </header>
</div>
    <nav>
        <ul class="inline-list-custom">
            <li><a href="homepage.php" >Home</a></li>                           
            <li><a href="add.php" >Add</a></li>                         
            <li><a href="edit.php" >Edit</a></li>                           
            <li><a href="delete.php" >Delete</a></li>                           
            <li><a href="productlist.php" class="current" >List</a></li>                            
            <li><a href="search.php" >Search</a></li>                           
        </ul>
    </nav>
</div>
</div>

</head>

<div align="center"> 
<? 
if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");
if (!mysql_select_db($database))
die("Can't select database");

$result = mysql_query("SELECT * FROM {$table}");

if (!$result) 
{
die("Query to show fields from table failed");
}

$fields_num = mysql_num_fields($result);


echo "<table border='0'><tr>";

for ($i = 0; $i < $fields_num; $i++) 
{
$field = mysql_fetch_field($result);
echo "<th>{$field->name}<br></th>";
}

echo "</th>\n";
while ($row = mysql_fetch_row($result)) 
{
echo "<tr>";
    echo "<tr>";
foreach ($row as $cell)
    echo "<td><br>$cell</td>";
echo "</tr>\n";

}
mysql_free_result($result); 
?>
<html>


<style>

table {

overflow:auto;
border-collapse: collapse;
width: 30%;
  overflow-x: hidden;
        height: 50%;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        width: -webkit-fit-content;
        overflow-y: scroll;
        flex: 1;
        -webkit-flex: 1;

}

th, td {

text-align: center;
padding: 10px;
    font-weight: normal;


}

tr:nth-child(even){background-color: #f2f2f2}

th 
{
background-color: #808080;
color: #faf8f7;
    font-weight: normal;
}

</style>
</form>     
<footer>
    <ul>
        <li>&copy; 2016 <a href="index.html">Bradley Boothman</a>. All   rights reserved.</li>
        <li><a href="mailto:bradleyboothman@gmail.com"></i> bradleyboothman@gmail.com</a></li>
        </ul>
    </footer>
</div>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/hawthorne.js"></script>
</body>
</html>
</footer>

0 个答案:

没有答案