0

我在 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>

感谢帮助 ：）

注意：包括第一个表：

<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>
4

3 回答 3

1

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

这类似于这个问题

于 2013-04-17T21:53:20.330 回答
1

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

于 2014-12-15T19:18:37.567 回答
0

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

您可以尝试将 #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;
于 2013-04-17T22:06:50.407 回答