Layout breaking on custom table with sticky header and first column

[vale sable]

Hi everyone, I've encountered a weird problem and I would very much appreciate any help.

I'm creating a custom table with sticky header and first column on scroll and Drag&drop on table rows, but my grid is breaking apart and looks different in codepen and my local enviroment.

The first cell of table header in codepen is from some reason larger than the rest, even though it has fixed width of 250px. Also, in codepen, when I resize the screen to be larger, there is a gap between first columns and rest of the table.
In my local enviroment, however, all cells are the size they should be and there is no gap between first column and the rest on resize, but on horizontal scroll, I'm getting a gap between table-header and table-wrapper

Here is a link to codepen: https://codepen.io/AnaZG1509/pen/xxJbjzV, as well as the screenshot of how it looks in my local enviroment. All the code is copy/pasted and exacly the same on both places (except for checkbox styles).

If anyone has any idea on how to fix it, please let me know. Thanks and happy coding

[smoky locust]

Hi @vale sable ,
Try adding the following ruleset at the top of your css file and see if that solves the problem :-

* {
  box-sizing: border-box;
}

Without it, any padding provided to an element will be added to it's width before being rendered.
For e.g. :-

some-element {
  width: 250px;
  padding-left: 10px;
}

In the case above, "some-element" will not have a resulting width of 250px, but 260px (250px width + 10px padding left).
In order for it to be confined to a width of 250px (i.e. to include padding in the total width provided), the "box-sizing" property needs to be set to "border-box".

In a lengthy css file, this sort of a problem is admittedly difficult to debug, and it's therefore best (IMO, anyways) to set this property for all elements before starting to style the app (by applying it to '*', meaning all elements).

Here's for some further reading on the property, if you're interested :-
https://www.w3schools.com/css/css3_box-sizing.asp