我有彼此相邻的2张桌子在一个更大桌子的元素内进行了测试
我必须对齐这2个表的column元素以在一行中显示。 。我还不能通过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>
最佳答案
问题在于您的主表宽度小于您放入的三个表的宽度。所以带有Quantity的第三张桌子塞满了。我添加了边框颜色以更好地了解整个过程。
http://jsfiddle.net/btevfik/Hkcsr/
关于html - 将2个表的单元格列彼此并排对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15563050/