空间出现在表格元素和溢出滚动条

Question

所以我一直试图让table包含有主标题/头的单元格滚动时粘在上面的信息，但在制作介于中间，我使整个表围绕含div元件，以允许一组height和overflow性质。但是，当预览加载它显示表格本身和滚动条之间的差距。于是，我做了一些研究，发现我可以继续在表格中的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; 
} 

Answer 1

我建议做.table_edit的inline-block元素;这将导致元素的尺寸由其包含的元素确定（这是理想的你想要的）。您还需要将text-align:center添加到父元素，在这种情况下，我将它添加到body元素。

UPDATED EXAMPLE

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