佈局的第二<table>不來的正是作爲第一<table>

Question

我的第二個表的外觀和感覺是不來的第一個表，甚至還複製相同的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提琴here

Answer 1

你有你的錶行中，現在4周的cols的設計。現在排的總寬度爲：當它應該是100％時，6％+ 10％+ 8％+ 10％= 34％。

所以編輯代碼並刪除聯樣式td元件和創建CSS等：

.label { 
    width: 20%; 
} 

.field { 
    width: 30%; 
} 

然後2個標籤+字段= 4 COLS compination將是100％的寬度。

Answer 2

我在 https://jsfiddle(dot)net/unpy10vq/6/ 更新請檢查 希望這將幫助你

Answer 3

你可以試試這個代碼

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