Cgrid View - Fixed Header


I need a help on the cgridview how to set the fixed header

currently i have data in the scrollable table

when the data grows more, user needs to scrool the table and view the data.

currently when we scroll the table header also scroll, i need to fix the header and only the data needs to be scrolled,

how to do this?

Thanks in advance.


i think you want to this


                        'name' => 'Artist Name',


                        'type' => 'raw',

                        'value' => 'CHtml::encode($data["artist_name"])',

                        'htmlOptions' => array('width' => '125px')


Thanks Ankit,

There is no issue with width,

Actual problem is in the "image 1" table headers (case number…) are visible, this was fine.

The height of the table is fixed. when data grows scroll bar will there.

In Image 2, while scroll to see the more records headers (case number…) is missing.

Is there any possible to make header as fixed and not scrollable?

Actual Implementation:

We have a table inside div. When we have more records, we were able to scroll the div. When we are scrolling, entire table is moving upwards. But, we want the table header as fixed inside the div.

Please suggest us any ideas to solve this.

Try this:

    table.items thead { float:left; margin: 0;}

    table.items tbody { float:left; margin: 0; height:200px; overflow:auto}

Probably you have to set the widths of <th>s and <td>s explicitly.

Thank you, solution working for me :)