Styling ASP.NET Grid View Control

Question

I am using a Grid View Control and binding a datatable to this in the code behind I have set Page size to five. and the row style and alternate row style Height to 70px.

If I Have 5 rows in the page of grid view the displays is fine. but if I get less than 5 rows the rows expand to use the aviable spce.

I have set 420px height to the grid view. Please help me..

The Style Sheet is Something Like this:

    mGrid
    {

        border-collapse: collapse;
        width: 340px;
        height: 420px;


    }
    .mGrid .emptyrowstyle
    {
        height: 70px; font-size: 11px; padding: 6px 0 0 8px; border-bottom: 2px solid #fff; color:#505050; 
        /*line-height: 12px;*/
        background: url(../townlist_bg.jpg); 

    }
    .mGrid .alt
    {
        font-size: 11px; padding: 6px 0 0 8px; border-bottom: 2px solid #fff; color:#505050; height: 70px; 
        /*line-height: 12px;*/
        background: url(../townlist_bg.jpg); 
       /* background-image: url('../m_images/townlist_bg.jpg');*/
    }
    .mGrid .pgr
    {
        height: 15px;
        background: #424242 url(../m_images/grd_pgr.png) repeat-x top;
    }
    .mGrid .rowstyle
    {
        font-size: 11px;  border-bottom: 2px solid #fff; color:#505050; background-image:url(../townlist_bg.jpg); height: 70px; 
        /*height: 12px;*/
        /*background: #fcfcfc url(grd_alt.png) repeat-x top;*/
        /*background: url(../townlist_bg.jpg); */
    }
    .mGrid .pgr table
    {
        margin: 5px 0;
    }
    .mGrid .pgr td
    {
        border-width: 0px;
        padding: 0 6px;
        border-left: solid 0px #666;
        font-weight: bold;
        color: #fff;
        line-height: 12px;
    }
    .mGrid .pgr a
    {
        color: #666;
        text-decoration: none;
    }
    .mGrid .pgr a:hover
    {
        color: #000;
        text-decoration: none;
    }

And this is the Grid view declartion: I am not pasting databound coloumns for simplicity:

CssClass="mGrid" AutoGenerateColumns="False" PageSize="5" OnPageIndexChanging="grdvListings_PageIndexChanging" RowStyle-CssClass="rowstyle" ShowHeader ="false" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr">

Thankk You

HectorMac HectorMac · Accepted Answer · 2011-08-04T17:16:07

You need to remove the height style from the table (mGrid).

If you only want the table to be as tall as the number of actual rows dicatates, you should let the height style for the rows determine the height of the table.

Styling ASP.NET Grid View Control

1 Answers