jQWidgets Forums

I need to show grid with column width = 10px. I think default is 25px. So I use cellclassname and set width in class: width: 10px!important;
The grid looks wrong. Cell still occupied 25px with left border. Here is the code from demo. Also, how do I change header width?

 <style>
     
         .a1 {
             width: 10px!important;
             
         }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/beverages.txt";
            var cellclass = function (row, columnfield, value) {
               
                return 'a1';
            }
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: 850,
                columns: [
                  { text: '', datafield: 'name', cellclassname: cellclass },
                  { text: '', datafield: 'type', cellclassname: cellclass },
                  { text: '', datafield: 'calories', cellclassname: cellclass},
                  { text: '', datafield: 'totalfat', cellclassname: cellclass },
                  { text: '', datafield: 'protein',  cellclassname: cellclass }
              ]
            });
        });
    </script>