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;
}

解决方法

我建议将.table_edit作为内联块元素;这将导致元素的尺寸由其包含元素确定(理想情况下,这是你想要的).您还需要将text-align：center添加到父元素,在这种情况下,我将其添加到body元素.

UPDATED EXAMPLE

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