`forceResponsive: false` always switches to stacked immediately

[cr0ybot]

I'm using the non-jQuery version, and this part on line 133 always results in the table being measured as wider than it's parent (which in my case is the same width, no offset):

133      const tableSize = table.getBoundingClientRect().left + table.offsetWidth
134
135      if (tableSize > table.parentElement.offsetWidth) {

I don't believe the getBoundingClientRect().left is necessary in this calculation as it is getting the offset from the viewport, not the parent. If the intention is to check if the table is inset from the parent's bounds, table.offsetLeft would do the job.

[jerrylow]

@cr0ybot in my testing the values are always the same, there is no harm in merging but could you provide the DOM structure so I can see an accurate problem + solution?

[cr0ybot]

@jerrylow Sure thing! You can actually see some of the weirdness on the official demo page for vanilla JS. If you reduce the width of your viewport, eventually the table with forceResponsive: false breaks out of the confines of the parent (from roughly 675-580px wide) because the parent is using padding. This is not exactly the same problem I had, in which the table would immediately switch to the mobile version, but it's the same underlying cause.

I've created a codepen that illustrates the issue which mainly manifests when a table's parent element is offset from the viewport, using the current basictable code and demo styles: https://codepen.io/cr0ybot/pen/RwEKQGG