title: angular ui-grid column header is not aligned with data
body: <p>I am implementing a basic table ui-grid containing 6 columns that spans the width of the page, but I notice that the column header width is not neatly aligned with the data. Looking at the computed CSS value the width of the header vs data is off by &lt;1 pixel (eg. 182.222229003906 in the header vs 182.986114501953 in data)</p>
  
  <p>In the first few columns the difference is not noticeable but it gets more obvious in the rightmost columns. I already removed custom CSS classes to check that there's no interference with ui-grid's rendering but got the same result.</p>
  
  <p>And then I found that even in some of the tutorial pages that behavior also exists. Example: this page in ui-grid's tutorial:</p>
  
  <p><a href="http://ui-grid.info/docs/#/tutorial/321_singleFilter" rel="nofollow">http://ui-grid.info/docs/#/tutorial/321_singleFilter</a></p>
  
  <p>The gridOptions are very simple:</p>
  
  <pre><code>columnDefs: [
    { field: 'name' },
    { field: 'gender', cellFilter: 'mapGender' },
    { field: 'company' },
    { field: 'email' },
    { field: 'phone' },
    { field: 'age' },
    { field: 'mixedDate' }
  ]
  </code></pre>
  
  <p>I browsed other samples in the tutorial and find that not all grids suffer from this issue. (for example, this: <a href="http://ui-grid.info/docs/#/tutorial/401_AllFeatures" rel="nofollow">http://ui-grid.info/docs/#/tutorial/401_AllFeatures</a> is all neatly aligned)
  What affects this behavior and how it can be avoided?</p>
  
  <p>Thanks!</p>