Выравнивание столбцов ячейки из 2 таблиц друг с другом вместе

Question

У меня есть две таблицы рядом друг с другом. Протестировано внутри элемента одной большой таблицы. Мне нужно выровнять элементы столбцов из этих двух таблиц для отображения в одной строке. , Я не смог достичь этого с помощью valign или vertical-align. , Пожалуйста, помогите

<style type="text/css"> 
    .FieldLabel { 
     padding: 2px; 
     width: 180px; 
    } 

    .Head { 
     text-align: left; 
     font-weight: bold; 
     font-size: 20px; 
    } 

    .auto-style1 { 
     width: 420px; 
     vertical-align: top; 
    } 

    .auto-style2 { 
     width: 420px; 
     vertical-align: inherit; 
    } 
</style> 
<div id="TXN_SAMPLES_createForm1"> 
<table> 
<tr> 
    <td colspan="2" class="Head">Request Details 
    </td> 
</tr> 
<tr> 
    <td style="width: 500px"> 
<table> 
    <tr> 
     <td class="FieldLabel">Lead Src Code 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {Lead_Lead_Source_CODE} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Request Date 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {REQUEST_DATE} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Customer 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {CUST_NAME} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Product 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {PROD_NAME} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">DG/Non-DG 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {DG_NONDG} 
      </div> 
     </td> 
    </tr> 
</table> 
</td> 
<td class="auto-style2"> 
<table> 
    <tr> 
     <td class="FieldLabel">. 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">. 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Country 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {COUNTRY} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Division 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {DIVISION} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel"></td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
      </div> 
     </td> 
    </tr> 
</table> 
</td> 
<td style="width: auto"> 
<table style="float: right"> 
    <tr> 
     <td class="FieldLabel"></td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel"></td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel"></td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Quantity (Kg) 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {QTY} 
      </div> 
     </td> 
    </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2" class="Head">Sample Details 
     </td> 
    </tr> 
<tr> 
<td style="width: 500px"> 
<table> 
<tr> 
    <td class="FieldLabel">Dispatch Date 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {DISPATCH_DATE} 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="FieldLabel">Lot No. 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {LOT_NO} 
     </div> 
    </td> 
</tr> 
    <tr> 
     <td class="FieldLabel">AWB No. 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {AWB_NO} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Dispatch Mode 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {DISPATCH_MODE} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Freight (THB) 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {FREIGHT} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Additional Cost 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {ADDITIONAL_COST} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Receipt Conformation 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {RECEIPT_CONFORMATION} 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="FieldLabel">Reason for Delay 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {REMARK} 
      </div> 
     </td> 
</tr> 
    </table> 
    </td> 
<td class="auto-style1"> 
<table> 
    <tr> 
     <td class="FieldLabel">Shipment Date 
     </td> 
     <td> 
      <div class="FieldPlaceholder DataOnly"> 
       {SHIPMENT_DATE} 
      </div> 
     </td> 
    </tr> 
    <tr> 
    <td class="FieldLabel">Packing 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {PACKING} 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="FieldLabel">Process Time (days) 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {Process_Time} 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="FieldLabel">Courier Service 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {COURIER} 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="FieldLabel">Weight Charged 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {WEIGHT_CHARGEDBY_COURIER} 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="FieldLabel">Lead Id 
    </td> 
    <td> 
     <div class="FieldPlaceholder DataOnly"> 
      {Lead_Id} 
     </div> 
    </td> 
</tr> 
    </table> 
    </td> 
</tr> 
    </table> 
</div> 

Answer 1

проблема заключается в том, что ваша основная ширина стола было меньше, что три таблицы вы клали внутри. поэтому третья таблица с Quantity была переполнена. Я добавил границы цветов, чтобы лучше понять все.

http://jsfiddle.net/btevfik/Hkcsr/

Answer 2

Избегайте использования таблиц для создания макета. прочитайте это here.

Теперь, если вы хотите создать два столбчатых макет с использованием дивов, содержащими элементы формы, увидеть эту простую HTML-разметку шахты:

создать класс контейнера CSS, как это:

.table-container 
{ 
    margin: 2px; 
    border: 1px solid #e7e7e7; 
    background: #fff; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    width: auto; 
    height: auto; 
    position: relative; 
} 

.property-row 
{ 
    margin: 5px; 
    overflow: hidden; 
} 
.property-name 
{ 
    width: 150px; 
    text-align: right; 
    padding: 5px; 
    color: #777777; 
    vertical-align: middle; 
    float: left; 
} 

и использование это нравится:

<div class="table-container float-left mediumPercentWidth"> 
    <div class="property-row"> 
     <div class="property-name"> 
      <label>Lead Src Code</label> 
     </div> 
     <div> 
      <input type="text" class="mediumPercentWidth" /> 
     </div> 
    </div> 
    </div> 

Я создал sample here.

В этом режиме, как два divs расположены бок о бок, используя свойство css float:left. Как в большинстве мест определяется только процентная ширина, чтобы придать ему жидкий макет. Обратите внимание на шаблон разметки.