Yii CGridView Adds Class or Style to Header Cells

Question

I want to set some css style or class for the header cell in a specific column.

This changes the css only for the data cells in the column.

'columns'=>array( array( 'name'=>'id', 'header'=>'#', 'htmlOptions'=>array('style'=>'width: 50px; text-align: center;', 'class'=>'zzz'), ), 

How to set css or style in the header cell of this column?

Answer 1

Use headerHtmlOptions .

 'columns'=>array( array( 'name'=>'id', 'header'=>'#', 'htmlOptions'=>array('style'=>'width: 50px; text-align: center;', 'class'=>'zzz'), 'headerHtmlOptions'=>array(...), ), 

Answer 2

filterHtmlOptions

If you want to style the content that the user enters into the filterbox, for example, "text-align: right" - then

 'filterHtmlOptions'=>array('style'=>'text-align: right'), 

will not work, because it will only stylize the outer cell of the table (td), and not the inner filter container (div) or input element:

 <td style="text-align: right;"> <div class="filter-container"> <input> </div> </td> 

What you can do is add a class to the outer cell of the table:

 'filterHtmlOptions'=>array('class'=>'filterBoxRight'), 

which will result in the following:

 <td class="filterBoxRight"> <div class="filter-container"> <input> </div> </td> 

Then run the following code:

 $(document).on('ready', function(){ $('.filterBoxRight').find('.filter-container').find(':input').css({ 'text-align': 'right', }); });