title: css scrollbar going over element size
body: <p>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:
  <a href="https://i.stack.imgur.com/FLKcv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FLKcv.png" alt="" /></a>
  (it's the one blue scrollbar on the right)<br><br>
  I would want it to be like this:
  <a href="https://i.stack.imgur.com/L5Jhv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L5Jhv.png" alt="enter image description here" /></a>
  <br>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:</p>
  <pre><code>                    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;
                          }
                      }
                  }
  </code></pre>
  <p>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</p>