即使在复制相同的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
最满意答案
您现在在表格行中有4个列。 行的总宽度现在是:6%+ 10%+ 8%+ 10%= 34%,应该是100%。
所以编辑你的代码并删除td元素的内联样式并创建css,如:
.label { width: 20%; } .field { width: 30%; }那么两个标签+ field = 4 cols compination将是100%宽度。
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.
更多推荐
发布评论