Diseño para JqGrid

[HaroldV]

Buenas Amigos este es mi JqGrid el problema que tengo es que no encuentro la manera en como crearle un diseño ya sea que se vea asi :


alguien podria ayudarme con esto ? aqui les dejo mi codigo a ver que tendria que agregar o hacer?

Código:

        <script  type="text/javascript" src="jquery-1.3.2.min.js" ></script>
        <script  type="text/javascript" src="jquery.jqGrid.min.js" ></script>

        <script  type="text/javascript">

            $(document).ready(function() {


                            //TABLA DE DATOS INGRESADOS

         $("#dataGrid").jqGrid({
   	 colNames:["Indicativo","Estacion","A;o-Mes","Mes","Dia","Hora","Registro"],
   	 colModel:[
   		{name:"Indicativo",index:'id', width:100, editable:false,editoptions:{readonly:true,size:10}},
   		{name:"Estacion",index:'invdate', width:180,editable:true,editoptions:{size:10}},
   		{name:"A;o-Mes",index:'name', width:180,editable:true,editoptions:{size:25}},
   		{name:"Mes",index:'amount', width:180, align:"right",editable:true,editoptions:{size:10}},
   		{name:"Dia",index:'tax', width:180, align:"right",editable:true,editoptions:{size:10}},
   		{name:"Hora",index:'total', width:180,align:"right",editable:true,editoptions:{size:10}},
		{name:"Registro",index:'closed',width:180,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
   	],

        rowNum:10,
   	rowList:[10,20,30],
        pager:jQuery('#pagered')
        


});


dentro del html tengo esto 

 <center><table id="dataGrid" border="1" ></table></center>
        <div id="pagered" class="scroll" style="text-align:center;"></div>