2013-07-13 2 views
0

나는 80 개의 테이블을 가진 테이블을 가지고있다. 어떻게하면 1 행을 절대적으로 만들 수 있을까요? 시도했지만 추가하지 못했습니다.html 테이블의 첫 행 'absolute'를 만드는 방법

position: absolute; 

그러나 작동하지 않았습니다. 거기에 CSS 또는 jquery를 사용하여 그것을 할 수 있습니까?

<table> 
<thead> 
<tr> 
    <td style="position: absolute;"></td><td style="position: absolute;"></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td> 
</tr> 
</tbody> 
</table> 

편집 : 죄송합니다. 내 잘못

+0

참고하시기 바랍니다에서''당신' '있어야 할'당신이 달성하려고하는 무엇 ' – ChelseaStats

+0

? ''의 절대 위치 지정이 가능합니다 (예 : http://jsfiddle.net/thfz5/).하지만 왜이 것이 좋을지 확신하지 못합니다. – user113215

+2

[this jQuery plugin ] (http://www.fixedheadertable.com/). – Stano

답변

3

페이지를 스크롤해도 항상 맨 위에 표시되도록 첫 번째 행을 만드는 방법을 찾고 있다고 가정합니다. absolute은 그렇게 할 수 없습니다. position:absolute이 요소를 페이지의 특정 위치에 "붙이는"경우 페이지가 스크롤되면 요소가 페이지와 함께 스크롤되어 보이지 않게됩니다.

헤더가 무엇이든 상관없이 상단에 붙게하려면 - 약간의 CSS 트릭이 필요합니다.

여기에는 이러한 기술의 example이 있습니다. position: fixed를 사용하는

가장 쉬운 방법은 물론, 다음과 같습니다 Demo

+1

[this] (http://stackoverflow.com/q/1628265/2454376)를 참조하십시오. – mishik

1

이처럼 수행

table thead tr:first-child { 
    position: absolute; 
} 

는 그냥 first-child 의사 요소를 사용합니다.

또는 @mishik으로 논의 된 바와 같이 position: fixed 또는 position: relative; top: 0;이 필요할 수 있습니다.

0

헤더가 제자리에 남아 있지만 테이블의 정렬에 문제가있는 경우 테이블을 스크롤하려면 헤더를 짧게 만들어야합니다. 다른 스크롤 막대 :

<div style="position:relative;"> 
<div style="overflow: auto;"> 
    <table> 
    <thead style="position:absolute;"> 
    <!-- Header here --> 
    </thead> 
    <tbody> <!-- body here --> </tbody> 
    </table> 
</div> 
</div> 
관련 문제