A space appears between the table element and the overflow scrollbar

Question

So, I'm trying to create tableone that contains information in which the main title / heading elements are attached to the top when scrolling, but in the middle of its creation, I created a containing element divaround the entire table to allow the properties of the set heightand overflow. But when the loaded preview showed the gap between the table itself and the scroll bar. So I tried to do some research and found that I can save all the properties in the css section of the table by placing it indisplay:blockbut even after I did this, the same space that was shown earlier was still obvious, except that he moved the contents to the side. I don't need help regarding a sticky title, as I want to do it myself, but any help with a scroll bar will be very helpful!

Also, unrelated to the question, I want to know if there is a way to change the scroll bar to something other than the default browser scroll bar.

Codepen: http://codepen.io/PorototypeX/pen/iKJAq

CSS

div.table_edit {
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: inline-block;
}
table {
  text-align: center;
  width: 1210px;
  background: #BABABA;
  padding: 0;
  border-collapse: collapse;
}
th {
  margin: 0;
  width: calc(1210px / 6);
  border: none;
  padding: 15px;

}
#header_row {
  background: #636363;
}
th.titleone {
  background: #292929;
}
td {
  padding: 15px;
  width: calc(1210px / 6);
}
td.namebar {
  background: #404040;
  font-weight: bold;
}
tr.alternating_color {
  background: #9C9C9C;
}
tr:hover {
  background: #808080;
}
tr.a:ternating_color:hover {
  background: #808080;
}

Answer 1

.table_edit inline-block; , ( ). text-align:center , body.

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