Question

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

一个几乎解决方案是设计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”的填充应用于“寻呼机”TR中的呈现HTML。

Answer 1

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

.gridview td {
    padding: 2px;
}

或这是您的标题

.gridview th {
    padding: 2px;
}

Answer 2

好的，我明白了。关键是要确保样式.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;
}

Answer 3

可以应用CSS，如下所示，

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

GridView - 使用CSS向单元格添加填充

3 个答案: