I’ve got a slightly frustrating issue where my rows are out of line with the row headers if the row is double height due to the content, my dropdowns affect the height of the row depending on what the selection is but for simplicity of the example I’ve hardcoded the data. The issue appears in the browser (both FF and chrome) but not in JSFiddle, I’ve had to use Plunker in order recreate the error. I’ll put a link to both as it may help
I am not sure if this response helps, but check it out as well.
I had the same issue when working with my project. What I figured was my Javascript was messing up the way in which my data was being represented using CSS. So I erased the JS (just the particular resize and active function) and used a different approach to do it and it worked fine.
Just check if you can change the way your defining the table functions.
I don’t think it’s the JS as there is the minimal JS included and no functions. I thought I’d work around by adding an extra column at the start of the table which sizes correctly but as soon as I add fixedColumnStart then the error reappears, so it must be something to do with the freezing of the first column…
I am not sure if you are declaring anywhere else that the table takes autoWidth and auto Line height. Just disable them in the handsontable definition.
try autoColumnSize: False
I feel that majority of your problems are arising because the table is just auto adjusting line height after some time. I would first try to fix that.
In Handsontable we set it up to 13px while Plunker makes it 16px. If that is the case, then we already have it reported as a bug, that when the font is changed asynchronously table rows are misaligned. We can see it here as well Handsontable example - JSFiddle - Code Playground
Is the fon’t in your project 13px or like in the Plunker demo?