GridView - Adding Drawdowns to Cells Using CSS

Question

I use CSS to create a gridview. Everything works fine for me, except for filling in the cells containing the data. I searched Google and found some solutions that are related to a different style in Item when using Bound fields. However, I do not use related fields. I am attached to a list (from MyObject). How can I add padding to data in cells?

One solution is the style of the TR and TD elements. This works fine ... until I add paging to the GridView. Indentation also applies to page counters that I don't want. This is because the paging bar is another TR in the displayed HTML table.

Here is a little of what is going on with me:

.aspx Page:

        <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 HTML "" TR.

Answer 1

, . .gridViewPager td, .gridview td. SO. :

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

, .

.gridview td {
    padding: 2px;
}

.gridview th {
    padding: 2px;
}

Answer 3

CSS can be applied as shown below.

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