Question

我有一个table，其中有很多tr和td's

目前看起来如下图所示。

箭头中的区域需要减少一点。我尝试添加padding，但它没有用。

下面是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执行此操作。

Answer 2

增加或减少填充以调整两个td之间的空间

.field, .label {
   padding: 2px;
}

Answer 3

我修改了你的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;
}

减少两个td

3 个答案: