Question

我在div中有一个表有这个问题。我创建了两个表，目标是让它们彼此相邻。最终一个低于另一个。我尽可能多地尝试使用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>

感谢您的帮助：）

NOte：包括第一张表：

<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

因为您的第二个表位于第一个表之后，所以它不会在它旁边。您应该将第一个表浮动到右侧，或者反转表格在标记中的顺序。

This is similar to this question

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（父级）上也没有高度属性。如果内容长于外部div，则应将其移出，直到移除高度为止。这不止一次发生在我身上。

表格在div html中没有正确显示

3 个答案: