表格在div html内无法正确显示

Question

我在div内的表格有这个问题。 我创建了两个表，目标是使它们彼此相邻。 它最终比另一个低。 尽我所能尝试使用CSS，但是我对CSS的经验并不丰富。 代码在这里：

#contactdetails_table{
    width: 500px;
    height: 190px;
/*  border: solid #234b7c 3px; */
    background-color: #FFC3CE;
    border-radius: 15px;
    direction: rtl;
    float: left;
    color: white;
    font-size: large;
    position: relative;
    overflow: scroll;
}

这是第二个表的代码，该表设法低于当前表：

<table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
                            <tr>
                                <td>الايميل:</td>
                                <td><?php echo $profiledetails->email; ?></td>
                            </tr>
                            <tr>
                                <td>المدينة:</td>
                                <td><?php echo $profiledetails->city; ?></td>
                            </tr>
                            <tr>
                                <td>الهاتف:</td>
                                <td><?php echo $profiledetails->telephone; ?></td>
                            </tr>
                            <tr>

                            </tr>
                        </table>

感谢帮助 ：）

注意：包括第一张表：

<div id="contactdetails_table">
                            <table  cellpadding="10" cellspacing="10" >
                            <tr>
                                <td>الاسم الكامل:</td>
                                <td><?php echo $profiledetails->fullname; ?></td>
                            </tr>
                            <tr>
                                <td>اسم المستخدم:</td>
                                <td><?php echo $profiledetails->username; ?></td>

                            </tr>

                            <tr>
                                <td>الجوال:</td>
                                <td><?php echo $profiledetails->mobile; ?></td>
                                                            </tr>

                            <tr>
                                <td>العنوان:</td>
                                <td><?php echo $profiledetails->address; ?></td>
                            </tr>
                        </table>

                        <table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
                            <tr>
                                <td>الايميل:</td>
                                <td><?php echo $profiledetails->email; ?></td>
                            </tr>
                            <tr>
                                <td>المدينة:</td>
                                <td><?php echo $profiledetails->city; ?></td>
                            </tr>
                            <tr>
                                <td>الهاتف:</td>
                                <td><?php echo $profiledetails->telephone; ?></td>
                            </tr>
                            <tr>

                            </tr>
                        </table>

Answer 1

因为您的第二张桌子在第一张桌子之后，所以它不会在它旁边。 您应该将第一个表格向右浮动或颠倒表格在标记中的顺序。

这类似于这个问题

Answer 2

默认情况下，表显示为块元素（因此，它们为什么会堆叠在一起）。

您可以尝试将#contactdetails_table中的所有表显示为内联块元素。

就像是

#contactdetails_table table{

    /* display as inline elements */
    display: inline-block;
    /* this will push the tables to the top of the div */
    vertical-align:top;

}

对于IE 7及更低版本，您应使用带有

      display: inline;
      zoom:1;

Answer 3

确保外部div（父级）上也没有height属性。 如果内容比外部div长，则应将其剔除，直到移除高度。 这不止一次发生在我身上。