html 表格内容溢出,html – 表格元素和溢出滚动条之间出现空格

所以我一直在努力制作一个包含主要标题/标题单元格的信息的表格,当滚动时它们会粘在顶部但是在制作它的过程中,我在整个表格周围创建了一个包含div元素以允许一组高度和溢出属性.但是当加载预览时,表格本身和滚动条之间存在间隙.所以我试着做一些研究,发现我可以将表格css部分中的所有属性保存到display：block中,但即使在我这样做之后,之前显示的相同空间仍然很明显,除非它推动了内容去旁边.我不想要任何关于粘性标题的帮助,因为我想自己做,但任何滚动条的帮助将是非常有帮助的！

此外,与问题无关,我想知道是否有任何方法可以将滚动条更改为默认浏览器滚动条之外的其他内容.

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;

}