代码之家 › 专栏 › 技术社区 › HardCode

gridview-使用css向单元格添加填充

asp.net-2.0 css

HardCode · 技术社区 · 14 年前

我正在使用css来设置网格视图的样式。除了包含数据的单元格中的填充之外,其他一切都正常工作。我在google上找到了多种解决方案,在使用绑定字段时,这些解决方案涉及到项目的另一种样式。但是,我没有使用绑定字段。我正在绑定一个(myobject)列表。如何在单元格中的数据周围添加填充?

一个几乎可以解决的办法是设计tr和td元素的样式。这个很好…直到我将分页添加到gridview。padding也适用于页面计数器,这是我不想要的。这是因为分页行只是呈现的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 类不将填充应用于第行。这个 gridViewPager 类不将0px的填充应用于“pager”tr中呈现的html。

3 回复 | 直到 8 年前

Germ 14 年前

您可以添加类似的样式。

.gridview td {
    padding: 2px;
}

或者这个给你的头

.gridview th {
    padding: 2px;
}

Community Egal 7 年前

好吧,我想出来了。关键是要确保风格 .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;
}

SharK 8 年前

css可以应用如下所示,

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