两张桌子并排并停止自动中心

时间:2014-05-11 01:59:59

标签: php css html-table

我创建了两个表并完美地编写了代码,但是当得到足够长的时候,有些正确的表会将自己置于中心位置。我该如何解决这个问题?

enter image description here

这是我的代码:

#schoolmates_tableMain {
width: 30%;
border: 1px;
min-width: 30%;
position: relative;
opacity: 0.99;
background-color: rgba(100, 100, 100, 0);
float: left;
}


#schoolmates_table { 
width: 59%;
border: 1px;
min-width: 59%;
position: relative;
margin: auto; 
padding-top: 10px;  
background: transparent;
}

更新

我也尝试将float:right;放在右表上,结果如下:

enter image description here

正确的表格“退出了背景”,如果完全被击落,你可以看到滚动条我甚至看不到“添加好友”链接。如何使正确的表格看起来像第一张图片并保持正确?

HTML

<div id = "green_center">
        <br/><br/>

        <table id = "schoolmates_tableMain" cellspacing = 30>
            <tr id = "transparent">
                <td width = "30%">
                    asdasdas
                    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

                </td>

            </tr>
        </table>


<br/>

<?php
    while($row=mysqli_fetch_assoc($result)) {
    $myimg = $row['img'];
    $name = "".$row['firstname']." ".$row['lastname'];
    $user = $row['username'];
    $firstname = $row['firstname'];
    $desc = $row['description'];
    $email = $row['email'];
    $me = $_SESSION['username'];
    $id = $row['id'];

    if($email==$myemail) {

    } else {
            echo "<table id = 'schoolmates_table'>";
            echo "<tr>";
            echo "<td>";
                echo "<table border = '0' width = '100%'>";
                    echo "<tr>";
                        echo "<td width = '1%'>";
                            echo "<div id = 'sm_padding'>";

                                if($myimg=="") {
                                    echo "<img width = '100' height = '100' src = './img/blank_profile.jpg' alt = 'Profile Picture'>";
                                } else {
                                    echo "<img width = '100' height = '100' src = './profiles/".$row['img']."' alt = 'Profile Picture'>";
                                }

                            echo "</div>";
                        echo "</td>";

                        echo "<td>";
                            echo "<div id = 'home_greetings'>";
                                echo " ".$name."<br/>";
                            echo "</div>";

                            echo "<div id = 'home_small'>";
                                echo "".$row['course']."&nbsp;&nbsp;|&nbsp;&nbsp;".$row['year']."&nbsp;&nbsp;|&nbsp;&nbsp;".$row['university']."<br/>";
                                echo "<small>".$desc."</small><br/>";

                                echo "</div>";
                                echo "<div id = 'sm_small'>";

                                $ss="SELECT * FROM friends WHERE me = '$me' AND them = '$user'";
                                $rr = mysqli_query($con,$ss);
                                $cc = mysqli_num_rows($rr);

                                if($cc==1) {
                                    echo "<a href='#' style = 'text-decoration:none; color:#1f8e1c'>Friends</a>";
                                } else {
                                    $ss2="SELECT * FROM friends WHERE me = '$user' AND them = '$me'";
                                    $rr2 = mysqli_query($con,$ss2);
                                    $cc2 = mysqli_num_rows($rr2);

                                    if($cc2==1) {
                                        echo "<a href='#' style = 'text-decoration:none; color:#1f8e1c'>Friends</a>";
                                    } else {
                                        $s = "SELECT * FROM friend_request WHERE me = '$me' AND them = '$user'";
                                        $r = mysqli_query($con,$s);
                                        $count = mysqli_num_rows($r);

                                        if($count==1) {
                                            echo "<a href = 'cancelrequest_com.php?user=$user&school=$theschool' style = 'text-decoration:none; color:#1f8e1c'>Cancel Friend Request</a> ";
                                        } else {
                                            $s2 = "SELECT * FROM friend_request WHERE me = '$user' AND them = '$me'";
                                            $r2 = mysqli_query($con,$s2);
                                            $count2 = mysqli_num_rows($r2);

                                            if($count2==1) {
                                                echo "<a href = 'accept_com.php?user=$user&school=$theschool&id=$id' style = 'text-decoration:none; color:#1f8e1c' >Accept as Friend</a> ";
                                                echo "&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;";
                                                echo "<a href = 'notnow_com.php?user=$user&school=$theschool&id=$id' style = 'text-decoration:none; color:#1f8e1c' >Not Now</a> ";
                                            } else {
                                                echo "<a href = 'addfriend_com.php?user=$user&school=$theschool' style = 'text-decoration:none; color:#1f8e1c' >Add to Friends List</a> ";
                                            }

                                        }
                                    }
                                }



                                                echo "&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;";
                                                echo "<a href = 'addfriend_com.php?user=$user' style = 'text-decoration:none; color:#1f8e1c'>View Profile</a> ";
                        echo "</td>";
                    echo "</tr>";
                echo "</table>";


            echo "<td>";
            echo "</tr>";
            echo "</table>";

            }


            }
        ?>

        <br/><br/><br/><br/><br/><br/>
        </div>

这是我的green_center代码:

#green_center {

margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #D8F0DA;
width: 100%;
height: auto;
min-height: 100%;
position: relative;

background-image: url(../img/wallpaper.jpg); 
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;

overflow: auto;

}

1 个答案:

答案 0 :(得分:0)

添加

#green_center { overflow:auto}

到你的css