How to style datagrid column headers

[kush]

Hi,
    I would like to style a specific column div element of ( datagrid-htable - >datagrid-header-row -> <td field="project_name" class="">
<div class="datagrid-cell datagrid-cell-c1-project_name" style="text-align: left;">)bold element .

I tried styler method like this.
{"field":"project_name","title":"project_name","sortable":true,"editor":"text","maxLength":100,"width":"9%","align":"left",styler: function(value,row,index){return 'text-overflow: ellipsis;color:red;';}}
But it is applied to body cells of that columns.
Please help me.

[stworthy]

The simplest way to style the column title is to wrap a <span> element around the title.

Code:

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px">
    <thead>
        <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100"><span style="font-weight:bold">Product</span></th>
        </tr>
    </thead>
</table>