CSS 고정 헤더 테이블 (예 :

) 누구든지 CSS를 사용하여 테이블에 고정 헤더를 만들 수 있습니다 (js 없음). 컬럼 크기가 db에서 오는 것처럼 동적 데이터를 지원해야합니다. ie7/8에서만 일해야합니다. 건배CSS 고정 헤더 테이블 (예 :

출처

2010-11-19 nzyme

은 내가 TBODY에 오버 플로우를 설정하려고했지만 대신 당신이 및 – nzyme

JS로 가기로 결정한 경우 (이 기능은 완전 CSS에서는 거의 불가능하므로) script을 사용해보세요. demo을 참조하십시오. 그것은 크로스 브라우저이고 성능을 위해 최적화되었습니다.

출처

2010-11-19 17:26:51 raveren

본문 부분을 스크롤하고 첫 번째 (머리글) 행을 움직일 수없는 표를 만드는 것처럼 들립니다. 이것은 헤더 행이있는 테이블 하나와 <div style="max-height: 400px; overflow: auto;"> 안에있는 두 번째 테이블을 가지고 수행 할 수 있습니다. JavaScript를 사용하지 않는 한 고정 너비 열에서만 작동합니다.

달성하려는 목표가 아닌 경우이 게시물을 무시하십시오.

출처

2010-11-19 14:06:41

에서 작동하지 않는 것 : 당신의'thead'을 유지하는 방법을 데모를 줄 수 고정 된 위치? – MatTheCat

@MatTheCat를 사용할 수있는 두 테이블을 사용하는 예 –

안녕하세요 Kolink, 네, 그게 내가 달성하려고 노력하고있어,하지만 열은 고정 너비가 아니며 오히려 어떤 자바 스크립트를 사용하지 않을 것입니다 – nzyme

이 그래서 내가 생각했던 것입니다 :

<table> 
    <thead> 
     <tr> 
      <th>Value</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     </tr> 
    </tbody> 
</table> 

tbody { 
    max-height:100px; 
    overflow:auto; 
    position:absolute; 
} 
tr td:last-child { /* do horizontal scrollbar useless */ 
    padding-right:1em; 
}

편집 :이 IE8에서 작동하지만 IE7 (IE9 베타 테스트)하지 raaah, IE7이 <td> 요소에 높이 규칙을 적용 보인다!

출처

2010-11-19 14:41:11 MatTheCat

고마워요.하지만 저에게 ie8에서는 작동하지 않습니다. – nzyme

IE8 트루 버전이 있습니까? – MatTheCat

당신이 비 베타 버전이라고 가정하고 그 다음 예 – nzyme

CSS 고정 헤더 테이블 (예 :

답변

관련 문제