서로 나란히있는 두 테이블의 셀 열 맞추기

서로 옆에 두 개의 테이블이 있습니다. 더 큰 테이블 하나의 요소 내에서 테스트했습니다.이 두 테이블의 열 요소를 한 줄로 정렬해야합니다. . 나는 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>

출처

2013-03-22 Sweta Dwivedi

고객, 국가, 제품 및 부서를 동일한 회선으로 원하십니까? – btevfik

고객과 국가가 동일한 줄에 있기를 원합니다 또한 제품, 부서 및 수량이 같은 줄에 들어가길 원합니다 –

html 테이블 구조를 바꿀 필요가 없습니까? – btevfik

도와주세요. 그래서 Quantity와 함께 세 번째 테이블은 벼락치기를하고있었습니다. 모든 것을 더 잘 이해하기 위해 테두리 색상을 추가했습니다. 레이아웃을 생성하기위한 테이블을 사용하여

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

출처

2013-03-22 07:08:59 btevfik

의 가장 좋은 방법이라고 생각했다. http://www.jquery4u.com/plugins/30-amazing-jquery-tables/ – btevfik

I 위젯을 사용하고 싶지 않습니다. . 내가 메인 테이블 크기를 늘리 겠지만 .. 정렬을위한 솔루션? –

@SwetaDwivedi 내가 문제를 해결하기 위해 게시 한 바이올린이 아닙니까? – btevfik

마십시오. 그것을 here으로 읽으십시오.

이 같은 컨테이너 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를 만들려면

지금, 나의이 간단한 HTML 태그를 참조 그것은이 좋아 :

<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가 나란히 배치됩니다. 대부분의 장소에서 백분율 너비 만 정의되어 유동적 인 레이아웃을 제공합니다. 마크 업의 패턴에 유의하십시오.

출처

2013-03-22 08:20:44

정말 고맙습니다. 저는 테이블 사용에 관한 수업을 배웠을 것입니다. 작은 변화도 힘들어합니다. :)이 테이블 레이아웃을 완전히 없앨 것입니다. –

서로 나란히있는 두 테이블의 셀 열 맞추기

답변

관련 문제