Thanks for the demo. I dug a bit more. The attached image shows the problem. The image was created in the following way.
I created a table using the code here
https://docs.google.com/document/d/19Oyih_STB2K81AJ85xmpi_vSo6_UJNutyKgT7MyTiDE/edit?usp=sharing.
The zoom level of Chrome browser was 125%.
Then, I clicked the first column, and typed the right arrow key to move toward the last column. Up to the second last column, the header column and the data column were perfectly aligned. Then, with the right arrow key stroke to reach the last column, suddenly the discrepancy between the header column borders and the data column borders happened as shown in the attached photo.
The divs of class "pq-grid-col-resize-handle" were aligned with the data column borders, thus creating the original problem of this post.
I observe this only with Chrome and zoom-in. At 100% zoom level, Chrome also displays the table correctly.
Any help would be appreciated. If you need any more information on the issue, please let me know.