Handsontable example

If you resize the E column or any other after E to a smaller width, will be lost the row alignment.

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 100%;" data-originalstyle="height: 320px; overflow: hidden; width: 100%;"></div>

CSS

</style><script src="https://cdn.jsdelivr.net/gh/handsontable/handsontable@latest/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/handsontable/handsontable@latest/dist/handsontable.full.min.css">

JavaScript

const example = document.getElementById('example1');
  
  
const cellA = 'A string with enough data';
const cellB = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
const dataList = [...Array(100).keys()]
    .map(_ => Array(30).fill().map((_, i) =>
    	(i < 3) ? cellA : cellB
));
  
  
  const hot1 = new Handsontable(example, {
    data: dataList,
    colHeaders: true,
    fixedColumnsLeft: 3,
    autoRowSize: {syncLimit: 300},
    //autoRowSize: true,
    viewportColumnRenderingOffset: 30,
    manualColumnResize: true,
    //scrollV: true,
  });