Datagrid RenderRow

[Rudy]

please help, I have a problem regarding the use DataGrid renderRow why in the column header (title) and the data is not aligned or do not look the same column. like this syntax:

html:
-------

<table>
<thead>
<tr>
   <th style = "width: 92px" field = "item_kode"> <b> Item Code </ b> </ th>
   <th style = "width: 191px" field = "ITEM_NAME"> <b> Item Name </ b> </ th>
   <th style = "width: 250px" field = "description"> <b> Description </ b> </ th>
   <th style = "width: 48px" field = "qty"> <b> Qty </ b> </ th>
   <th style = "width: 104px" field = "price_normal"> <b> Price Normal </ b> </ th>
   <th style = "width: 97px" field = "price_sale"> <b> Price Sale </ b> </ th>
   <th style = "width: 92px" field = "BRAND_NAME"> <b> Brand </ b> </ th>
</ tr>
</ thead>
</ table>

javascript:
---------------

<script>
  cardview var = $ .extend ({}, $ .fn.datagrid.defaults.view, {
        renderRow: function (target, fields, frozen, rowIndex, rowData) {
        var cc = [];
        cc.push ('<td width = 92px>' + rowData.item_kode + '</ td>');
        if (frozen) {
           cc.push ('<td width = 191>' + rowData.item_name + '</ td>');
           cc.push ('<td width = 250px>' + rowData.description + '</ td>');
           cc.push ('<td width = 48px>' + rowData.qty + '</ td>');
           cc.push ('<td width = 104px>' + rowData.price_normal + '</ td>');
           cc.push ('<td width = 97px>' + rowData.price_sale + '</ td>');
           cc.push ('<td width = 92px>' + rowData.brand_name + '</ td>');
        }
       
        $ ('# dg'). DataGrid ('fixColumnSize');
        cc.join return ('');
    }
});


$ (function () {
   $ ('# dg'). DataGrid ({
         view: cardview
    });
});
</ script>

I need your help for this problem and I really appreciate it.


regards,


Rudy

[stworthy]

Please try to set the 'box-sizing' CSS style with 'border-box'. To learn more how to extend a datagrid view, please refer to http://www.jeasyui.com/extension/datagridview.php

Code:

<style type="text/css">
  *{
    box-sizing:border-box;
  }
</style>