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

GridView - Add Padding to Cells with CSS

提问by HardCode

I'm using CSS to style a GridView. I have everything working fine except for the padding in the cells that contain the data. I've googled and found multiple solutions that involve another style on the Item when using Bound fields. However, I am not using bound fields. I am binding to a List(Of MyObject). How would I add padding around the data in the cells?

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

One almost-solution was to style the TR and TD elements. This works fine ... until I add paging to the GridView. The padding also applies to the page counters, which I do not want. This is because the paging row is just another TR in the rendered HTML table.

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

Here's a little of what I have going on:

这是我正在做的一些事情：

.aspx Page:

.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:

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;
}

The gridViewHeaderclass doesn't apply the padding to the TH row. The gridViewPagerclass doesn't apply the padding of 0px to the rendered HTML in the "pager" TR.

本gridViewHeader类不填充应用到TH行。本gridViewPager类没有的0像素填充应用到呈现的HTML中的“寻呼机” TR。

回答by Germ

You could add a style similar to this.

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

.gridview td {
    padding: 2px;
}

or this for your header

或者这是你的标题

.gridview th {
    padding: 2px;
}

回答by HardCode

Ok, I figured it out. The key was to make sure to style .gridViewPager tdto override .gridview td. Credit for the majority of this code goes to the selected correct answer in this SO posting. Here is the whole enchalada:

好的，我想通了。关键是确保样式.gridViewPager td覆盖.gridview td. 此代码的大部分归功于此 SO 发布中选择的正确答案。这是整个恩卡拉达：

.aspx:

.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:

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;
}

回答by SharK

CSS can be applied as shown below,

CSS可以应用如下所示，

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