css scrollbar going over element size

Question

I have made a table on my page that is scrollable, the problem is when styling, the table scrollbar is going over the size of the table element picture here: (it's the one blue scrollbar on the right)

I would want it to be like this:
It seems that the thead of the table is a bit bigger than the th elements, that's what the additional height is. I don't have anything that should make it a bit bigger than the th thou:

                    table {
                    text-align: left;
                    empty-cells: show;

                    text-align: center;
                    thead {
                        float: top;
                        color: white;

                        th {
                            position: sticky;
                            top: 0;
                            font-weight: 400;
                            padding: 1vh 2vw 1vh 2vw;
                            background-color: rgb(0, 119, 199);
                            white-space: nowrap;
                        }
                    }
                }

EDIT: Found out it's the border-spacing propery doing this. I want the table to have spacing though. I want it to be everywhere except for the top