第二个的布局与第一个完全不同(Layout of second is not coming as exactly as first )

即使在复制相同的HTML之后，第二个表的外观也不是第一个表。以下是截图：

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

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

我尝试设置td的宽度和高度，但它不是按照我想要的来。 我想根据表1的设计来设置它

更新

我的js 在这里小提琴

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