stack stack - 3 months ago 9
CSS Question

layout of second <table> is not coming as exactly as <Table>1

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 lookout

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

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.

Comments