title: Angular ui-grid unable to set column width and doesn't show horizontal scrollbar
body: <p>I'm a newbie with AngularJS and ui-grid.</p>
  
  <p>I want to show horizontal scrollbar, but it doesn't show and unable to change column width. 
  The width of the grid is not altered and all the columns are shrinked to fit the grid.</p>
  
  <p>1st. I did copy-paste from <a href="http://ui-grid.info/docs/#/tutorial/191_horizontal_scrolling" rel="nofollow">horizontal_scrolling tutorial</a> to <a href="http://plnkr.co/7aTQkW" rel="nofollow">my Plunker</a>. OK. It works.</p>
  
  <p>It defines column width like below code.</p>
  
  <pre><code>$timeout( function() {
    // colCount=10;
    for (var colIndex = 0; colIndex &lt; colCount; colIndex++) {
      $scope.gridOptions.columnDefs.push({ 
        name: 'col' + colIndex,
        width: 200
      });
    }
  });
  </code></pre>
  
  <p>2nd. I changed a little. But it doen't work.... <a href="http://plnkr.co/zjEvtG" rel="nofollow">2nd example Plunker</a></p>
  
  <pre><code>var arr = [{name:'col0', wigth: 200},
            {name:'col1', wigth: 200},
            {name:'col2', wigth: 200},
            {name:'col3', wigth: 200},
            {name:'col4', wigth: 200},
            {name:'col5', wigth: 200},
            {name:'col6', wigth: 200},
            {name:'col7', wigth: 200},
            {name:'col8', wigth: 200},
            {name:'col9', wigth: 200}];
  $timeout( function() {
    // arr.length=10;
    for (var i = 0; i &lt; arr.length; i++) {
      $scope.gridOptions.columnDefs.push(arr[i]);
    }
  });
  </code></pre>
  
  <p>Why 2nd example doesn't alter column width and doesn't show horizontal scrollbar?</p>
  
  <p>What's the difference between <a href="http://plnkr.co/7aTQkW" rel="nofollow">1st</a> and <a href="http://plnkr.co/zjEvtG" rel="nofollow">2nd</a>?</p>