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的單元格

回答

相關問題