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

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>

you want customer, country, product and division to be on the same line? — btevfik, Mar 22 '13 at 05:18
I want Customer and Country to be in the same Line Also i want product , division and quantity to be in the same line — Sweta Dwivedi, Mar 22 '13 at 06:40
I dont mind changing the html structure as long as it solves my problem.. but i dont understand..tables are supposed to be the best way to go ?! — Sweta Dwivedi, Mar 22 '13 at 06:52
for your case i think tables are the best bet. because you have so many fields. — btevfik, Mar 22 '13 at 07:13
no, tables are not supposed to be best way to go, specially when you are creating a layout. Tables are meant to display some data collection. besides, they render slow. And your code for creating such a simple layout is, one of the worst codes I've seen in a long time. — Manish Mishra, Mar 22 '13 at 07:13
basically, you want a two column layout. do it through divs. also, there is one very very simple way to create such things, twitter bootstrap, spend some time on it — Manish Mishra, Mar 22 '13 at 07:16
@ManishMishra lol thank you, I think i'll remove all the tables and just use divs if i cant find a fix.. i thought it was best way to go in-terms of alignment — Sweta Dwivedi, Mar 22 '13 at 07:53

score 1 · Accepted Answer · answered Mar 22 '13 at 07:08

1

the problem is that your main table width was smaller that the three tables you were putting inside. so the third table with Quantity was getting crammed. i have added border colors to understand the whole thing better.

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

answered Mar 22 '13 at 07:08

btevfik

3,391
3
27
39

also if you want something more sophisticated you can use one of these widgets http://www.jquery4u.com/plugins/30-amazing-jquery-tables/ – btevfik Mar 22 '13 at 07:14
I dont want to use a widget . . I will increase the main table size but.. any solution for the alignment? – Sweta Dwivedi Mar 22 '13 at 07:55
It does.. So what i understand is you have properly defined the table sizes to be the same including the – Sweta Dwivedi Mar 22 '13 at 08:16
i think they all need to have widths but not necesserily the same. you can play with it and see what happens. – btevfik Mar 22 '13 at 08:19
btevik .. is there a better approach than creating these tables.. they become confusing and very to hard to handle? – Sweta Dwivedi Mar 22 '13 at 08:20

score 1 · Answer 2 · edited May 23 '17 at 12:04

Avoid using Tables for creating layout. read it here.

Now, if you want to create two columnar layout using divs, containing form elements, see this simple html markup of mine:

create a container CSS class like this:

.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;
}

and use it like this:

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

I have created a sample here.

In this lookout, how, two divs are placed side by side using css property float:left. How at most places only percentage width is defined, to give it a fluid layout. Take notice of the pattern of the markup.

Thank you so much, i guess i learned my lesson about using tables.. i'm having a hard time making even small changes :) I will scrap this table layout completely — Sweta Dwivedi, Mar 22 '13 at 08:43

Aligning the Cell Columns of 2 tables beside each other together

2 Answers2