之间减少空间两款TD的

我有一个table，其中有很多tr和td's之间减少空间两款TD的

目前，它看起来像这样下面的形象。需要

在箭头的面积减小了一点。我尝试添加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

来源

2016-10-05 BNN

请添加一些代码。 –

可能是您的下拉列表或标签有填充或边距。 –

@nad在代码段 – Dhaarani

我说你应该从表中删除的cellpadding属性，并做到这一点通过CSS以及。

来源

2016-10-05 08:46:30 FrankyBoy

是。通过删除'cellpadding'它做了窍门。够了吗？ – BNN

增加或减少填充调整之间的空间两款TD的

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

来源

2016-10-05 08:51:51 Dhaarani

@nad现在检查它。 – Dhaarani

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

来源

2016-10-05 08:53:43 Sojtin

之间减少空间两款TD的

回答

相关问题