html - 减少两个 td 之间的空间

Question

我有一个表，其中有很多tr和td

目前它在下图中看起来是这样的。

The area in the arrow needs to be reduced a bit. I tried adding padding but it didn't worked.

下面是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

我会说你应该从表中删除 cellpadding 属性，并通过 css 也这样做。