표 요소와 오버플로 스크롤바 사이에 공백이 나타남

Question

스크롤 할 때 메인 제목/머리글 셀이있는 정보가 들어있는 table을 만들려고했지만 그 중 한 부분에서 테이블 전체에 div 요소를 포함하여 height 및 overflow 속성을 허용합니다. 그러나 미리보기가로드되면 테이블 자체와 스크롤바 사이에 간격이 나타납니다. 그래서 약간의 연구를 시도하고 테이블 CSS 섹션의 모든 속성을 display:block에 넣어 유지할 수 있다는 것을 알았지 만, 그 후에도 이전에 표시되었던 동일한 공간이 콘텐츠를 측면. 나는 끈적 헤더에 관해서 어떤 도움도 원하지 않는다. 왜냐하면 내가 직접하고 싶어하기 때문에 스크롤 막대를 사용하면 도움이 될 것이다.

또한 질문과 관련이 없으므로 기본 브라우저 스크롤바 외에 다른 항목으로 스크롤 막대를 변경하는 방법이 있는지 알고 싶습니다.

Codepen :

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_editinline-block 요소를 만드는 게 좋을 것 http://codepen.io/PorototypeX/pen/iKJAq

CSS; 요소의 치수가 포함 요소에 의해 결정됩니다 (이상적으로 원하는 것). 부모 요소에 text-align:center을 추가해야합니다.이 경우에는 body 요소에 추가했습니다.

UPDATED EXAMPLE

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