How to set Caption Layer height in jqGrid

I have following snippet to load the table gen开发者_如何学JAVAerated by jqGrid.

<div id="result">
    <table id="resultTable">
        <tr>
            <td />
        </tr>
    </table>
</div>

My other css interfering with jqGrid css, it causes the "caption layer" (The orange color bar at the very top of the table) height becomes very large and overlapped with other part of the page. Sorry, post image is not allowed.

The height is about 10 times larger and seems contains 3 rows with slightly different color in each. If I remove all my css, the "caption layer" display properly, but I lost all the headers, footers etc. I tried the suggestion by Tony in the link at jgGrid forum,

<style>
    #result table.scroll thead th  {height:30px;}
</style>

and suggestions by others, but none of them works for me. Please help me to set the "caption layer" height overwrite.

I suppose that you have some problem with CSS style "float:left" used somewhere on the page. I recommend you to look at the answer which solved close problem. If you have the same problem you should add to the <div id="result"> an additional style definition which set the floating like style="float:left" or which remove it like style="clear:left", style="clear:right" or style="clear:both".

If you have no "floating" problem and the title div will be just increased to some unwanted height you can fix the problem by setting additional CSS statically or set the height dynamically. The answer shows how to find the caption of the grid and get its height. In the same way you can set the height.