Layout of second <table> is not coming as exactly as first <table>

Question

My look and feel of the second table is not coming as the first table even after copying the same HTML also. Here is the screenshot below:

Table 1 html

<table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="otab">
            Main Information
        </td>
    </tr>
</table>
<table width="100%" border="0" cellpadding="2px" cellspacing="0">
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Project :
        </td>
        <td class="field" style="width: 10%;">
            <asp:DropDownList ID="ddlProject" runat="server" Width="90%">
                <asp:ListItem Value="1">--Select--</asp:ListItem>
                <asp:ListItem Value="2">Hubtown project 1</asp:ListItem>
                <asp:ListItem Value="3">Hubtown project 2</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td class="label" style="width: 10%; font-family: Courier New; font-size: 120%;">
            Legal Entity :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtlegalEnt" runat="server" Width="90%" ReadOnly="true"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Village :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtVillage" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Taluka :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtTaluka" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Survey No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtSurvey" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Hissa No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtHissa" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 12%; font-family: Courier New; font-size: 120%;">
            Area(Hectares) :
        </td>
        <td class="field" style="width: 8%;">
            <asp:TextBox ID="txtArea" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 10%; font-family: Courier New; font-size: 120%;">
            Area(Guntha) :
        </td>
        <td class="field" style="width: 6%;">
            <asp:TextBox ID="txtGuntha" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Present Purchase :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtPresPurch" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Class :
        </td>
        <td class="field" style="width: 10%;">
            <asp:DropDownList ID="ddlClass" runat="server" Width="90%">
                <asp:ListItem Value="1">--Select--</asp:ListItem>
                <asp:ListItem Value="2">Class 1</asp:ListItem>
                <asp:ListItem Value="3">Class 2</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Status :
        </td>
        <td class="field" style="width: 10%;">
            <asp:DropDownList ID="ddlStatus" runat="server" Width="89%">
                <asp:ListItem Value="1">--Select--</asp:ListItem>
                <asp:ListItem Value="2">Status 1</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
</table>

Table 2 html

<table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="otab">
            Contact Details
        </td>
    </tr>
</table>
<table width="100%" border="0" cellpadding="2px" cellspacing="0">
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Address 1 :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtAddress1" runat="server" Width="80%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Address 2 :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtAddress2" runat="server" Width="80%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Mobile No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtMobileNo" runat="server" Width="90%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Pancard No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtPancardNo" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
</table>

I tried setting width and height of the td's but it is not coming as per what I wanted. I want to set it as per the design of the table 1

update

My js fiddle here

Answer 1

you can try this code

<style>
    .main-info div,
    .contact-detail div{
        width: 50%;
        height: 40px;
        float: left;
        padding: 5px 20px;
        box-sizing: border-box;
    }
    .main-info div label,
    .main-info div input,
    .main-info div select,
    .contact-detail div label,
    .contact-detail div input,
    .contact-detail div select{
        width: 50%;
        float: left;
        display: inline-block;
    }
</style>

<div>
    <h3>Main Information</h3>
    <div class="main-info">
        <div>
            <label for="ddlProject">Project :</label>
            <select name="ddlProject" id="ddlProject">
                <option value="1">--Select--</option>
                <option value="2">Hubtown project 1</option>
                <option value="3">Hubtown project 2</option>
            </select>
        </div>
        <div>
            <label for="txtlegalEnt">Legal Entity :</label>
            <input name="txtlegalEnt" type="text" readonly="readonly" id="txtlegalEnt" />
        </div>
        <div>
            <label for="txtVillage">Village :</label>
            <input name="txtVillage" type="text" id="txtVillage"/>
        </div>
        <div>
            <label for="txtTaluka">Taluka :</label>
            <input name="txtTaluka" type="text" id="txtTaluka" />
        </div>
        <div>
            <label for="txtSurvey">Survey No :</label>
            <input name="txtSurvey" type="text" id="txtSurvey"/>
        </div>
        <div>
            <label for="txtHissa">Hissa No :</label>
            <input name="txtHissa" type="text" id="txtHissa" />
        </div>
        <div>
            <label for="txtArea">Area(Hectares) :</label>
            <input name="txtArea" type="text" id="txtArea"/>
        </div>
        <div>
            <label for="txtGuntha">Area(Guntha) :</label>
            <input name="txtGuntha" type="text" id="txtGuntha" />
        </div>
        <div>
            <label for="txtPresPurch">Present Purchase :</label>
            <input name="txtPresPurch" type="text" id="txtPresPurch"/>
        </div>
        <div>
            <label for="ddlClass">Class :</label>
            <select name="ddlClass" id="ddlClass">
                <option value="1">--Select--</option>
                <option value="2">Class 1</option>
                <option value="3">Class 2</option>
            </select>
        </div>
        <div>
            <label for="ddlStatus">Status :</label>
            <select name="ddlStatus" id="ddlStatus">
                <option value="1">--Select--</option>
                <option value="2">Status 1</option>

            </select>
        </div>
    </div>
    <h3 style="clear: both;">Contact Details</h3>
    <div class="contact-detail">
        <div>
            <label for="txtAddress1">Address 1:</label>
            <input name="txtAddress1" type="text" id="txtAddress1"/>
        </div>
        <div>
            <label for="txtAddress2">Address 2:</label>
            <input name="txtAddress2" type="text" id="txtAddress2"/>
        </div>
        <div>
            <label for="txtMobileNo">Mobile No :</label>
            <input name="txtMobileNo" type="text" id="txtMobileNo"/>
        </div>
        <div>
            <label for="txtPancardNo">Pancard No :</label>
            <input name="txtPancardNo" type="text" id="txtPancardNo"/>
        </div>
    </div>
</div>

Answer 2

I have updated at https://jsfiddle(dot)net/unpy10vq/6/ Please check hope this will help you

Answer 3

You have now 4 cols in your table row. The total width of row is now: 6% + 10% + 8% + 10% = 34% when it should be 100%.

So edit your code and remove the inline styles of td elements and create css like:

.label {
  width: 20%;
}

.field {
  width: 30%;
}

then two label+field = 4 cols compination would be 100% width.