GridView - 将填充添加到使用CSS的单元格

我使用CSS来设置GridView的样式。除了包含数据的单元格中的填充以外，我的一切正常工作。我使用Google搜索时发现了多个解决方案，这些解决方案在使用绑定字段时涉及Item上的其他样式。但是，我没有使用绑定字段。我绑定到一个List（Of MyObject）。我将如何添加填充单元格中的数据？GridView - 将填充添加到使用CSS的单元格

一个几乎是解决方案是风格的TR和TD元素。这工作正常...直到我添加分页到GridView。填充也适用于页面计数器，我不想要。这是因为分页行只是呈现的HTML表格中的另一个TR。

这里有一个小我所发生的情况：

.aspx页面中：

 <asp:GridView ID="gvTerritories" 
         runat="server" 
         CssClass="gridview" 
         AutoGenerateSelectButton="True" 
         GridLines="None" 
         AllowPaging="true" 
         PageSize="10"> 
      <HeaderStyle CssClass="gridViewHeader" /> 
      <RowStyle CssClass="gridViewRow" /> 
      <AlternatingRowStyle CssClass="gridViewAltRow" /> 
      <SelectedRowStyle CssClass="gridViewSelectedRow" /> 
      <PagerStyle CssClass="gridViewPager" /> 
     </asp:GridView>

CSS：

.gridview { 
    font-family: Arial; 
background-color: #FFFFFF; 
border: solid 1px #CCCCCC; 
} 

.gridViewHeader { 
background-color: #0066CC; 
    color: #FFFFFF; 
    padding: 4px 50px 4px 4px; 
    text-align: left; 
    border-width: 0px; 
    border-collapse: collapse; 
} 

.gridViewRow { 
background-color: #99CCFF; 
    color: #000000; 
    border-width: 0px; 
    border-collapse: collapse; 
} 

.gridViewAltRow { 
background-color: #FFFFFF; 
border-width: 0px; 
border-collapse: collapse; 
} 

.gridViewSelectedRow { 
background-color: #FFCC00; 
color: #666666; 
border-width: 0px; 
border-collapse: collapse; 
} 

.gridViewPager 
{ 
background-color: #0066CC; 
color: #FFFFFF; 
text-align: left; 
padding: 0px; 
}

的gridViewHeader类不填充应用到TH行。 gridViewPager类不会将“填充0px”应用于“pager”TR中的呈现HTML。

来源

2010-05-04 HardCode

你有没有尝试添加填充到你的GridView风格？ – Germ 2010-05-04 20:56:26

是的。它不起作用 - 我不记得了，但是它将填充添加到寻呼机部分，或者根本没有添加。 – HardCode 2010-05-05 13:57:34

好吧，我想通了。关键是要确保.gridViewPager td覆盖.gridview td。此代码的大部分信用转到this SO posting中的选定正确答案。这里是整个enchalada：

的.aspx：

<asp:GridView ID="gvTerritories" 
       runat="server" 
       CssClass="gridview" 
       AutoGenerateSelectButton="True" 
       GridLines="None" 
       AllowPaging="true" 
       PageSize="10"> 
    <HeaderStyle CssClass="gridViewHeader" /> 
    <RowStyle CssClass="gridViewRow" /> 
    <AlternatingRowStyle CssClass="gridViewAltRow" /> 
    <SelectedRowStyle CssClass="gridViewSelectedRow" /> 
    <PagerStyle CssClass="gridViewPager" /> 
</asp:GridView>

CSS：

.gridview { 
    font-family: Arial; 
    background-color: #FFFFFF; 
    border: solid 1px #CCCCCC; 
} 

.gridview td { 
    padding: 5px 50px 5px 5px; 
} 

.gridview th { 
    padding: 5px 50px 5px 5px; 
    text-align: left; 
} 

.gridview th a{ 
    color: #003300; 
    text-decoration: none; 
} 

.gridview th a:hover{ 
    color: #003300; 
    text-decoration: underline; 
} 

.gridview td a{ 
    color: #003300; 
    text-decoration: none; 
} 

.gridview td a:hover { 
    color: red; 
    text-decoration:underline;  
} 

.gridViewHeader { 
    background-color: #0066CC; 
    color: #FFFFFF; 
    text-align: left; 
} 

.gridViewRow { 
    background-color: #99CCFF; 
    color: #000000; 
} 

.gridViewAltRow { 
    background-color: #FFFFFF; 
} 

.gridViewSelectedRow { 
    background-color: #FFCC00; 
    color: #666666; 
} 

/* Of course, this doesn't work with IE6. Works fine with Firefox, though. */ 
.gridview tr.gridViewRow:hover td, .gridview tr.gridViewAltRow:hover td { 
    background-color: #CCCCCC; 
    color: #000000; 
} 

.gridViewPager 
{ 
    background-color: #0066CC; 
    color: #FFFFFF; 
    text-align: left; 
} 

.gridViewPager td { 
    padding: 3px; 
} 

.gridViewPager td a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

.gridViewPager td a:hover { 
    color: #FFFFFF; 
    text-decoration: underline; 
} 

/* The currently selected page number is rendered by ASP.NET in a span tag in the td. */ 
.gridViewPager span { 
    color: #000000; 
} 

#divGridView { 
    margin-top: 1.5em; 
}

来源

2010-05-05 14:08:27 HardCode

您可以添加类似于此的样式。

.gridview td { 
    padding: 2px; 
}

或这对于你的头

.gridview th { 
    padding: 2px; 
}

来源

2010-05-04 20:59:18 Germ

我做到了。将样式添加到.gridview td的问题在于该样式适用于传呼机，该传呼机与其他任何数据行一样。 – HardCode 2010-05-05 13:58:16

，如下所示的CSS可以应用，

<asp:BoundField DataField="SNo" HeaderText="S. No"> 
       <ItemStyle CssClass="YourCSS" /> 
      </asp:BoundField>

来源

2015-12-14 15:53:18 Lucky

GridView - 将填充添加到使用CSS的单元格

回答

相关问题