0

2つのテーブルが並んでいます。1つの大きなテーブルの要素内でテストされています。これら2つのテーブルの列要素を整列して、1行で表示する必要があります。。私は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>
4

2 に答える 2

1

問題は、メインテーブルの幅が、中に入れていた3つのテーブルよりも小さかったことです。そのため、3番目のテーブルQuantityは詰め込まれていました。全体をよりよく理解するために、境界線の色を追加しました。

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

于 2013-03-22T07:08:59.467 に答える
1

レイアウトの作成にテーブルを使用することは避けてください。ここでそれを読んでください。

ここで、フォーム要素を含むdivを使用して2つの列レイアウトを作成する場合は、次の単純な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>

ここにサンプルを作成しました。

このルックアウトでは、cssプロパティを使用して2つのdivを並べて配置しますfloat:left。流動的なレイアウトを提供するために、ほとんどの場所でパーセント幅のみが定義されています。マークアップのパターンに注意してください。

于 2013-03-22T08:20:44.807 に答える