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

问题是您的主桌子宽度小于您放入的三张桌子。所以第三张桌子Quantity越来越挤了。我添加了边框颜色以更好地理解整个事情。

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

Answer 2

避免使用表格来创建布局。在这里阅读。

现在，如果您想使用包含表单元素的 div 创建两个列式布局，请参阅我的这个简单的 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>

我在这里创建了一个示例。

在这个lookout中，如何使用 css property 并排放置两个 div float:left。如何在大多数地方仅定义百分比宽度，以使其具有流畅的布局。注意标记的模式。