Блог

Главная - Вопросы по программированию - Уменьшите расстояние между двумя тд

Уменьшите расстояние между двумя тд

#html #css #asp.net

#HTML #css #asp.net

Вопрос:

У меня есть a table , в котором много tr и td's

В настоящее время это выглядит так на изображении ниже.

Img2

Область в стрелке должна быть немного уменьшена. Я пытался добавить 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%;
    }

Скрипка html

Комментарии:

1. Пожалуйста, добавьте немного кода.

2. может быть, у вашего выпадающего списка или метки есть отступы или поля.

3. @nad добавить рабочий код во фрагменте

4. вы можете использовать инструменты разработчика браузера для проверки элементов. это скажет вам, что добавлено заполнение / поле, а затем напишите css, чтобы противостоять этому

5. @Dhaarani: добавлена скрипка

Ответ №1:

Я бы сказал, что вам следует удалить свойство cellpadding из таблицы и сделать это также с помощью css.

Комментарии:

1. да. удалив cellpadding его, сделал свое дело. Этого достаточно?

Ответ №2:

увеличил или уменьшил отступ, чтобы отрегулировать пространство между двумя тд

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

Комментарии:

1. @nad теперь проверьте это.

Ответ №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;
}