Reduce space between two td's - html

Question

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

Answer 1

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

Answer 2

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

Answer 3

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