并排显示div和表格

时间：2013-12-23 03:42:18

标签： php html css html5 html-table

我有一个div和一张桌子，我想让它们两个并排显示。经过几次尝试，我仍然无法做到。 div（navbar）位于左上角，表格位于右下角。

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylenav.css" />
<link rel="stylesheet" type="text/css" href="styletable.css" />
</head>
<body bgcolor="#13b4ff">

<div id="nav">
    <ul>
        <br>
        <li><a href="#">Home</a></li>
        <li><a href="#">New</a></li>
        <li><a href="#">Validation</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>

<table id='display'>
<thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>POSITION</th>
        <th>UNIT</th>
        <th>DEPARTMENT</th>
        <th>NO.TELEFON</th>
        <th>NO.FAKS</th>
        <th>E-MAIL</th>
        <th>DATA</th>
        <th>REASON</th>
    </tr>
</thead>
<tbody>
<?php
    $connect = mysql_connect("localhost","root","");
    if (!$connect){
        die(mysql_error());
    }
    mysql_select_db("permohonan_data");
    $results = mysql_query("SELECT * FROM pemohon");
    while ($row = mysql_fetch_array($results)){
?>

    <tr>
        <td><?php echo $row['id']?></td>
        <td><?php echo $row['name']?></td>
        <td><?php echo $row['postion']?></td>
        <td><?php echo $row['unit']?></td>
        <td><?php echo $row['department']?></td>
        <td><?php echo $row['telefon']?></td>
        <td><?php echo $row['faks']?></td>
        <td><?php echo $row['email']?></td>
        <td><?php echo $row['data']?></td>
        <td><?php echo $row['reason']?></td>
    </tr>

<?php
}
?>

</tbody>
</table>
</body>
</html>

div css：

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}

div#nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 0 auto;
    width: 160px;
    float: left;
    background-color: #000000;
    height: 100%;
}

div#nav ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}

div#nav li a {
    text-align: center;
    margin: 60px 0px -30px 0;
    display: block;
    padding: 20px;
    border: solid 3px #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    color: #000000;;
    background-color: #7a84d3;
    display: right-block;
}

div#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}

表css：

table#display{
    float:right;
    margin:0px;
    padding:0px;
    width: 300px ;
    box-shadow: 7px 7px 2px #888888;
    border:1px solid #000000;
    -moz-border-radius-bottomleft:9px;
    -webkit-border-bottom-left-radius:9px;
    border-bottom-left-radius:9px;
    -moz-border-radius-bottomright:9px;
    -webkit-border-bottom-right-radius:9px;
    border-bottom-right-radius:9px;
    -moz-border-radius-topright:9px;
    -webkit-border-top-right-radius:9px;
    border-top-right-radius:9px;
    -moz-border-radius-topleft:9px;
    -webkit-border-top-left-radius:9px;
    border-top-left-radius:9px;
}

table#display table{
    width: 0 ;
    height: 0 ;
    margin: 0 ;
    padding: 0 ;
}

table#display th{
    padding: 5px;
}

table#display tr:hover td{
    background-color:#82c0ff;
    background:-o-linear-gradient(bottom, #82c0ff 5%, #56aaff 100%);    
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #82c0ff), color-stop(1, #56aaff) );
    background:-moz-linear-gradient( center top, #82c0ff 5%, #56aaff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#82c0ff", endColorstr="#56aaff");  
    background: -o-linear-gradient(top,#82c0ff,56aaff);
}

table#display tr:first-child {
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");  
    background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Times New Roman;
    font-weight:bold;
    color:#ffffff;
}

table#display tr:first-child:hover {
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");  
    background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
}

table#display tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}

table#display tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

table#display td{
    background:-o-linear-gradient(bottom, #56aaff 5%, #82c0ff 100%);    
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #56aaff), color-stop(1, #82c0ff) ); 
    background:-moz-linear-gradient( center top, #56aaff 5%, #82c0ff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#56aaff", endColorstr="#82c0ff");  
    background: -o-linear-gradient(top,#56aaff,82c0ff);
    background-color:#56aaff;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:14px;
    font-family:Times New Roman;
    color:#000000;
}

table#display tr:last-child td{
    border-width:0px 1px 0px 0px;
}

table#display tr td:last-child{
    border-width:0px 0px 1px 0px;
}

table#display tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}

我知道代码有问题，但我不知道自己错过了什么。

3 个答案:

答案 0 :(得分：1)

试试这个...... 

 <html>
<head>
<link rel="stylesheet" type="text/css" href="stylenav.css" />
<link rel="stylesheet" type="text/css" href="styletable.css" />
</head>
<body bgcolor="#13b4ff">
<table>
<tr>
<td>
<div id="nav">
    <ul>
        <br>
        <li><a href="#">Home</a></li>
        <li><a href="#">New</a></li>
        <li><a href="#">Validation</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>
</td>
<td style="vertical-align:top">
<table id='display'>
<thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>POSITION</th>
        <th>UNIT</th>
        <th>DEPARTMENT</th>
        <th>NO.TELEFON</th>
        <th>NO.FAKS</th>
        <th>E-MAIL</th>
        <th>DATA</th>
        <th>REASON</th>
    </tr>
</thead>
<tbody>
<?php
    $connect = mysql_connect("localhost","root","");
    if (!$connect){
        die(mysql_error());
    }
    mysql_select_db("permohonan_data");
    $results = mysql_query("SELECT * FROM pemohon");
    while ($row = mysql_fetch_array($results)){
?>

    <tr>
        <td><?php echo $row['id']?></td>
        <td><?php echo $row['name']?></td>
        <td><?php echo $row['postion']?></td>
        <td><?php echo $row['unit']?></td>
        <td><?php echo $row['department']?></td>
        <td><?php echo $row['telefon']?></td>
        <td><?php echo $row['faks']?></td>
        <td><?php echo $row['email']?></td>
        <td><?php echo $row['data']?></td>
        <td><?php echo $row['reason']?></td>
    </tr>

<?php
}
?>

</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>

答案 1 :(得分：1)

以下是我之前所说的你可以做的事情：

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylenav.css" />
<link rel="stylesheet" type="text/css" href="styletable.css" />
</head>
<body bgcolor="#13b4ff">
<div id="wrapper"> // I am adding this <--------------------------
<div id="nav">
    <ul>
        <br>
        <li><a href="#">Home</a></li>
        <li><a href="#">New</a></li>
        <li><a href="#">Validation</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>

<table id='display'>
<thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>POSITION</th>
        <th>UNIT</th>
        <th>DEPARTMENT</th>
        <th>NO.TELEFON</th>
        <th>NO.FAKS</th>
        <th>E-MAIL</th>
        <th>DATA</th>
        <th>REASON</th>
    </tr>
</thead>
<tbody>
<?php
    $connect = mysql_connect("localhost","root","");
    if (!$connect){
        die(mysql_error());
    }
    mysql_select_db("permohonan_data");
    $results = mysql_query("SELECT * FROM pemohon");
    while ($row = mysql_fetch_array($results)){
?>

    <tr>
        <td><?php echo $row['id']?></td>
        <td><?php echo $row['name']?></td>
        <td><?php echo $row['postion']?></td>
        <td><?php echo $row['unit']?></td>
        <td><?php echo $row['department']?></td>
        <td><?php echo $row['telefon']?></td>
        <td><?php echo $row['faks']?></td>
        <td><?php echo $row['email']?></td>
        <td><?php echo $row['data']?></td>
        <td><?php echo $row['reason']?></td>
    </tr>

<?php
}
?>

</tbody>
</table>
</div>//end the wrapper <-----------------------
</body>
</html>

请留意上述评论。我所做的就是将表格和导航栏封装成一个div。然后我将在下面添加CSS：

#wrapper{
     display: inline-block;
}

我添加的CSS将一行显示元素。如果它不起作用，请尝试使用花车I.E.一个需要向左浮动，一个需要向右浮动。下面的评论，让我知道状态报告是什么：）

答案 2 :(得分：0)

如果你想并排使用两个元素，可以使用一个桌子和一个并排的桌子

Check this link i have added one table

或------------------------------------

你也可以有两个操作的差分div  一个div 浮动：左侧，另一个位于浮动：右侧

我希望这会对你有所帮助......：）

---------------的 [更新] ---------------------- ---

Check this link using div

相关问题
最新问题