Space appears between a table element and the overflow scrollbar

Question

So I've been trying to make a `table` that contains information that has the main title/header cells to stick to the top when scrolling but in the middle of making it, I made a containing `div` element around the whole table to allow a set `height` and `overflow` properties. But when the preview loaded it showed a gap between the table itself and the scrollbar. So I tried to do some research and found that I could keep all the properties in the table css section by putting it into `display:block` , but even after I did that the same space that was show before was still apparent except it shoved the content to the side. I do not want any help regarding the sticky header, since I want to do that myself but any help with the scroll bar would be super helpful! Also, not related to the question, I want to know if there is any way to change the scrollbar into something else besides the default browser scrollbar. Codepen: http://codepen.io/PorototypeX/pen/iKJAq CSS ``` div.table_edit { heigh…

Accepted Answer

I'd suggest making `.table_edit` an `inline-block` element; which will cause the dimensions of the element to be determined by its containing elements (which is ideally what you want). You would also need to add `text-align:center` to the parent element, in this case I added it to the `body` element.

UPDATED EXAMPLE

```
div.table_edit {
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    display: inline-block;
}
```

Space appears between a table element and the overflow scrollbar

Solution

Problem