таблица не отображается правильно внутри div html

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> 

Спасибо за помощь :)

Примечание: включали в себя первый стол:

<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, они должны отображаться до тех пор, пока высота не будет удалена. Это случилось со мной не раз.