Aligning the Cell Columns of 2 tables beside each other together - html

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

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/

Answer 2

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.