Question

我有两个彼此相邻的表在一个较大的表的元素中测试我必须将这两个表的列元素对齐，以便在一行中显示。。我没能用valign或vertical-align实现它。。请帮忙

Table Alignment

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

现在，如果你想使用包含表单元素的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>

我创建了一个sample here。

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

将2个表格的单元格列彼此对齐在一起

2 个答案: