Remove space on a table cell for a nested Table - html

I'm trying to do a nested-table I'm about to be finish on my first table
when this happen:
here Is my HTML markup:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
<td>
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
How can I make my second table Specification remove all those spaces and
be on the same position as Job Quotation?


you need to add vertical-align:top to td
and don't use inline styles, use classes instead
td {
vertical-align: top
}
.w400 {
padding-bottom: 5px;
background-color: black;
color: white;
width: 400px
}
.w397 {
width: 397px
}
.w397 table {
border-style: solid;
border-color: inherit;
border-width: medium;
width: 452px
}
.w397.title {
padding-top: 5px;
background-color: black;
color: white;
}
.w373.relative {
width: 373px;
position: relative
}
.h59 {
height: 59px
}
.h26 {
height: 26px
}
.h3 {
height: 3px
}
<table class="quotationTable1">
<tr>
<td>
<table>
<tr>
<td class="w397">
<table class="w397 table">
<tr>
<th colspan="2" class="w397 title">Job Quotation</th>
</tr>
<tr>
<td colspan="2" class="w397 h26">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w265">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w202">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h3">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h59">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label>
</td>
</tr>
</table>
</td>
<td>
<table class="w373 relative">
<tr>
<th colspan="3" class="w400">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>


You need to nest the table in a TR and TD within the parent table:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Related

Reduce space between two td's

I have a table in which there are many tr and td's
Currently it looks like this in the below image.
The area in the arrow needs to be reduced a bit. I tried adding padding but it didn't worked.
Below is the html
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background-color: #EAEFF5">
<tr>
<td class="label">
Project :
</td>
<td class="field" style="width: 10%;">
<asp:DropDownList ID="ddlProject" runat="server" Width="80%" AutoPostBack="false">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Taluka :
</td>
<td class="field">
<%--<asp:TextBox ID="txtTaluka" runat="server" Width="80%"></asp:TextBox>--%>
<asp:DropDownList ID="ddlTaluka" runat="server" Width="80%">
<%--<asp:ListItem Value="0">--Select--</asp:ListItem>--%>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Transaction Type:
</td>
<td class="field" style="width: 30%;">
<asp:DropDownList ID="ddlTranType" runat="server" Width="50%" AutoPostBack="true"
OnSelectedIndexChanged="ddlTranType_SelectedIndexChanged">
<asp:ListItem Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="AGR">Agreement Type</asp:ListItem>
<asp:ListItem Value="EXP">Expense Type</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
7/12 :
</td>
<td class="field" style="width: 30%;">
<%--<obout:ComboBox ID="ComboBox1" runat="server" Width="180px" Height="150px" AutoClose="false"
AllowCustomText="true" AutoValidate="true" AllowEdit="false" SelectionMode="Multiple"
DataTextField="COLUMN7_12" DataValueField="COLUMN7_12" OpenOnFocus="true" EmptyText="Select 7/12 ..."
EnableVirtualScrolling="true" EnableLoadOnDemand="true" OnLoadingItems="ComboBox1_LoadingItems"
Visible="true">
<ClientSideEvents OnItemClick="ComboBox1_Click" />
<ItemTemplate>
<input type="checkbox" runat="server" id="chk712" />
<%# Container.Text %>
</ItemTemplate>
<FooterTemplate>
Displaying items
<%# Container.ItemsCount > 0 ? "1" : "0" %>-<%# Container.ItemsLoadedCount %>out
of
<%# Container.ItemsCount %>.
</FooterTemplate>
</obout:ComboBox>--%>
<asp:TextBox ID="txt712" runat="server" Width="60%"></asp:TextBox>
<br />
<i>Start typing...</i>
</td>
</tr>
<tr>
<td class="label">
Ref No :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtrefno" runat="server" style="width: 60%" />
<img src="~/Images/search.gif" alt="Help" onclick="Search_Click()" style="cursor: pointer"
id="ImgSearch" runat="server" /><br />
<span style="color: #1B1E24;">(Auto Generated field)</span>
</td>
<td class="label">
Status :
</td>
<td class="field" style="width: 30%;">
<asp:DropDownList ID="ddlStatus" runat="server" Width="50%" AutoPostBack="false">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Ref Date :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtRefdate" runat="server" style="width: 60%" disabled="disabled" />
<%--<cc3:Calendar ID="CalDt1" runat="server" DatePickerMode="true" DatePickerImagePath="../Images/icon2.gif"
TextBoxId="txtRefdate" Enabled="true" CultureName="en-GB" DateFormat="dd/MM/yyyy">
</cc3:Calendar>--%>
</td>
<td class="label">
Transaction Date :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtdate" runat="server" style="width: 50%" readonly="readonly" />
<cc3:Calendar ID="Calc2" runat="server" DatePickerMode="true" DatePickerImagePath="../Images/icon2.gif"
TextBoxId="txtdate" Enabled="true" CultureName="en-GB" DateFormat="dd/MM/yyyy">
</cc3:Calendar>
</td>
</tr>
<tr>
<td class="label">
Remarks :
</td>
<td>
<asp:TextBox ID="txtRemarks" runat="server" Width="80%" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
CSS
.label
{
width: 20%;
height: 10%;
}
.field
{
width: 30%;
height: 10%;
}
Fiddle of the html

I'd say you should remove the cellpadding property from the table and do that via css as well.

increased or decreased the padding to adjust the space between two td's
.field, .label {
padding: 2px;
}

I modified your jsfiddle https://jsfiddle.net/g0oyxfqs/2/
table tr:first-child td {
padding-bottom: 1px; // insert total padding length here
}
table tr:nth-child(2) td {
padding-top: 0;
}

How to shift row in the table?

I have this ASP code:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td>text:
</td>
<td><%# Eval("Text") %>
</td>
</tr>
<tr>
<td rowspan="2">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" />
</td>
<td>X:
</td>
<td>
<%# Eval("Lon") %>
</td>
</tr>
<tr>
<td>Y:
</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Here how it looks in the view:
My question is how can I shift text row that it will look like that:

Forget what I said before, this is probably what you are looking for:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td colspan="2">text:
</td>
<td ><%# Eval("Text") %>
</td>
</tr>
<tr>
<td rowspan="2">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" />
</td>
<td>X:
</td>
<td>
<%# Eval("Lon") %>
</td>
</tr>
<tr>
<td>Y:
</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Adding a colspan=2 attribute to your :text label/header field.

I want to create multiple columns in row(three columns) between rows(contains two columns) in html. how to do this?

Please guide. Image is attached.
I want make proper alignment for all rows and columns. I used this code to make this table. How to align and add fourth column in Deduction Mode row so that table rows and columns become align. Thank you.
<table width="100%" class="generalTable">
<tr>
<th colspan="3" class="clspopupheading"> Approval
</th>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="2">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td >
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>

You want to throw the multiple choices into a table in one . Also, the colspans weren't quite right. Something like this.
<table width="100%" class="generalTable" border="2">
<tr>
Approval
</th>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="3">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td colspan = 3>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>

border does not extend - css

The bottom border is only till the end of textboxes. I am working in visual studio 2010. The same code works fine in another PC. Why
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>

You are missing third TD in second row. Insert it and it will show up.
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>

You missed the third td in second tr
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
</div>

You are indeed missing the third <td></td> or you can colspan= "2" one of the others

you missed the third td ,if you want to only have two td in second tr,use colspan="2" in that td tag :
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td colspan="2">
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>

Try this code...
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
AGE
</td>
<td width="40%">
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>

Unable to align word to the left

I'm trying to create a table with 2 table data and 2 table headers. After researching about html codes, I realized the way to shift the word to the left is Text-Align="Left" as written below. Unfortunately, it didn't work. I'm not using any CSS but just plain html codes.
Here is my codes :
<table style="width: 100%;">
<tr>
<th style="width: 189px; height: 23px;">Full Name:</th>
<td style="width: 1910px; height: 23px;">
<asp:Label ID="lblFullName" runat="server" Text="" Text-Align="Left"></asp:Label>
</td>
<th style="width: 21px; height: 23px;">Contact:</th>
<td style="width: 684px; height: 23px">
<asp:Label ID="lblContact" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>

<asp:Label /> will generate an <span> HTML tag, which is inline, and text-align to it is undefined, otherwise, set text-align of the td:
<td style="width: 1910px; height: 23px; text-align: center;">
<asp:Label ID="lblFullName" runat="server" Text=""></asp:Label>
</td>
Or make your <asp:Label /> as a block element:
<asp:Label ID="lblFullName" runat="server" Text=""
style="display: block; text-align: center;"
></asp:Label>

Try this...
<table style="width: 100%;">
<tr>
<td style="width: 189px; height: 23px;">Full Name:</td>
<td style="width: 1910px; height: 23px;">
<asp:Label ID="lblFullName" runat="server" Text="" Text-Align="Left"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 21px; height: 23px;">Contact:</td>
<td style="width: 684px; height: 23px">
<asp:Label ID="lblContact" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>