Aligning the Cell Columns of 2 tables beside each other together

Question

I have 2 tables beside each other Tested within the element of one bigger table I have to align the columns elements of these 2 tables to display in a single line . . I havent been able to achieve it with valign or vertical-align . . Please help

<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

Avoid using Tables for creating layout. read it here.

Now, if you want to create two columnar layout using divs, containing form elements, see this simple html markup of mine:

create a container CSS class like this:

.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;
} 

and use it like this:

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

I have created a sample here.

In this lookout, how, two divs are placed side by side using css property float:left. How at most places only percentage width is defined, to give it a fluid layout. Take notice of the pattern of the markup.

Answer 2

the problem is that your main table width was smaller that the three tables you were putting inside. so the third table with Quantity was getting crammed. i have added border colors to understand the whole thing better.

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