스크롤바 존재 여부에 관계없이 tbody 너비를 고정하는 방법은 무엇입니까?

Question

thead{ 
width: calc(100% - 17px); 
display:block; 
} 

tbody{ 
display:block; 
overflow-y: auto; 
height:100px; 
} 

http://jsfiddle.net/mkgBx/

나는 TBODY + 스크롤과 동일하게 THEAD의 폭을 조정할 수 있습니다. 그러나 스크롤바가 표시되지 않는 경우 tbody가 오른쪽으로 더 늘어납니다. tbody 너비를 수정할 방법이 있습니까?

Answer 1

이 문제를 처리하려면 자바 스크립트를 사용해야합니다. 스크롤바가 나타나는지 확인하고 그에 따라 tbody의 너비를 조정하십시오. t는 TBODY 요소입니다

여기이 관련된 JS 코드입니다 :

if (t.clientHeight == t.scrollHeight) 
{ 
    t.style.width = "224px"; 
} 

내가 수정 한 당신의 JSFiddle 그것은 당신의 경우에 작동하는 방법을 표시합니다.

Answer 2

너비가 100 % 인 테이블에 적용해도 스크롤이 있는지 여부는 중요하지 않습니다. 이 불필요로

thead{ 
    width: 100%; 
    display:block; 
} 

Answer 3

내가 명시 적으로, 테이블의 <tbody> 및 <thead> 태그를 선언하지 않을 것입니다. 문제의 한 가지 해결책은 행 <tr>을 <th> 위치로 고정하는 것입니다. 다른 사람이 여기에 비슷한 문제가 : How to make a tables header static when scrolling

Answer 4

나는 스크롤바의 존재를 무시하도록 tbodys 너비를 설정할 수 있다고 생각하지 않습니다. 마크 업 구조의 변경이 허용 될 수 있습니까?

CSS이 사업부는 스크롤 및 세트 폭을 유지하기 위해 테이블을 제공 할 수 있습니다

<table> 
    <thead> 
     <tr> 
      <th style="width:165px">Name</th> 
      <th>Country</th> 
     </tr> 
    </thead> 
</table> 
<div> 
    <table> 
     <tbody> 
      <tr> 
       <td style="width:165px">Mart Poom</td> 
       <td>Estonia</td> 
      </tr> 
      <tr> 
       <td>David Loria</td> 
       <td>Kazakhstan</td> 
      </tr> 
      <tr> 
       <td>Wojciech Szczęsny</td> 
       <td>Poland</td> 
      </tr> 
      <tr> 
       <td>Gianluigi Buffon</td> 
       <td>Italy</td> 
      </tr> 
      <tr> 
       <td>Igor Akinfeev</td> 
       <td>Russia</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

http://jsfiddle.net/nF2NL/1/

table{ 
    font: 11px arial; 
    width: 245px; 
} 
th, td{ 
    border:1px solid #000; 
} 
div { 
    height:90px; 
    width: 262px; /*table width + 17px */ 
    overflow-y: auto;  
} 

HTML.