CSS를 사용하여 고정 된 머리글로 스크롤 가능한 테이블을 만드는 방법

Question

테이블의 머리글을 고정하려고합니다. 테이블이 스크롤 가능한 div 안에 있습니다. 제 코드는 여기 http://jsfiddle.net/w7Mm8/114/ 제게 제안 해주세요.

감사

내 코드 :

<div style="position: absolute; height: 200px; overflow: auto; "> 
 
    <div style="height: 250px;"> 
 
     <table border="1"> 
 
      <th>head1</th> 
 
      <th>head2</th> 
 
      <th>head3</th> 
 
      <th>head4</th> 
 
      <tr> 
 
       <td>row 1, cell 1</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
      <tr> 
 
       <td>row 2, cell 1</td> 
 
       <td>row 2, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

내가 할 수있는 건방진 방법을 생각할 수

, 나는이 최선의 선택이 될 것이라고 생각하지 않지만 그것은 효과가있을 것이다.

헤더를 별도의 테이블로 만든 다음 다른 하나를 div에 배치하고 최대 크기를 설정 한 다음 overflow을 사용하여 스크롤을 허용하십시오.

HTML :

<table border="1"> 
    <tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
    </tr> 
</table> 
<div class="scroll"> 
    <table> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr> 
    </table> 
</div> 

CSS :

table { 
    width: 500px; 
} 

.scroll { 
    max-height: 60px; 
    overflow: auto; 
} 

DEMO HERE

Answer 2

싶은 것은 테이블의 헤더에서 테이블의 내용 별개입니다. <th> 요소 만 스크롤 할 수 있습니다. <tbody> 및 <thead> 요소를 사용하여 HTML에서이 구분을 쉽게 정의 할 수 있습니다.
이제 표의 머리글과 본문이 서로 계속 연결되어 있지만 여전히 동일한 너비 (동일한 스크롤 속성)를 갖습니다. 이제는 더 이상 테이블로 '작동하지'않게하려면 display: block을 설정할 수 있습니다. 이렇게하면 <thead>과 <tbody>이 분리됩니다. <thead> 더 이상 몸과 동일한 폭을 공유하지 않기 때문에 정적을 설정해야합니다,

table tbody 
{ 
    overflow: auto; 
    height: 100px; 
} 

그리고 마지막 :

table tbody, table thead 
{ 
    display: block; 
} 

이제 테이블의 본체에 스크롤을 설정할 수 있습니다 테이블의 헤더에 폭 : 또한 <td>에 대한 고정 폭을 설정해야합니다

th 
{ 
    width: 72px; 
} 

. 이렇게하면 정렬되지 않은 열의 문제가 해결됩니다. 당신은 또한 일부 HTML 요소를 누락

td 
{ 
    width: 72px; 
} 

---

참고. 모든 행 머리글 행을 포함하는 <tr> 요소에 있어야합니다 :

<tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
</tr> 

나는 이것이 당신이 무엇을 의미하는지 바랍니다.

jsFiddle