HTML : 어떻게 개체의 위치를 ​​이동할 수 있습니까?

Question

HTML 표가 있습니다. 너무 화려하지는 않습니다. 그것은 thead와 tbody가 있습니다. 나는 tbody만을 아래로 움직이기 위해 어떻게 javascript 나 jQuery를 사용할 수 있는지 궁금했다.

편집 : 그래서 내가하는 일에 대해 약간의 맥락을 제공합니다. 나는 정보가 담긴 테이블을 가지고있다. jQuery를 사용하여 머리글을 제자리에 고정하여 머리글을 아래로 스크롤 할 때 여전히 고정되어 있습니다. 머리글과 첫 번째 줄이 겹치는 작은 문제로 모두 잘 작동합니다. 그래서 tbody의 꼭대기를 움직여야합니다. 의미 머리글은 제자리에 머물러 있으며 본문은 테이블의 첫 번째 행 (즉, 머리글 뒤의 첫 번째 행)을 볼 수 있도록 약간 아래로 이동합니다.

jQuery 또는 javascript로이를 수행하는 방법이 있는지 궁금합니다.

Answer 1

당신은 jQuery의 스크롤 방법을 사용할 수 있습니다 http://api.jquery.com/scroll/

나는 더 많은 정보가 필요하지만, 이런 식으로 뭔가 할 것 같은데 :

이

$(window).scroll(function(){ 
    $("table").animate({marginTop: 50}, 250); 
}); 

이 편집 : 알아요이 답변이 승인되었습니다 맞지만 내가 downbotes에 의해 명백한 것처럼 질문을 오해 한 것 같습니다. OP가 테이블을 내려 놓고 머리글처럼 고정되어 있다고 생각했습니다. 스크롤 방법을 제안했습니다. 스크롤 방법은 테이블을 스크롤 할 때 위치 상태를 변경하는 방법입니다. 다른 사람들이 지적했듯이

당신은 단순히과 같이 원하는 헤더 + 간격의 높이 아래의 표를 밀어 원하는 :

table { 
    margin-top: 80px; 
} 

Answer 2

여기에서 문제를 재현하려고 시도했습니다. 확실히 동일한 효과를 얻는 더 좋은 방법이 있지만이 코드는 사용자가 가지고있는 코드입니까? 이 테이블 헤더 고정 유지하기 위해 jQuery를 사용할 필요가 없다, 그래서 CSS를 사용 :

http://jsfiddle.net/LLjdk/

관련 CSS :

테이블 헤더 (스크롤 이동)를 고정하는 것으로

thead { 
    position: fixed; 
    background: #fff; 
} 

table { 
    margin-top: 28px 
} 

, 배경이 설정되어 테이블의 나머지 부분이 뒤에 오면 그 부분은 보이지 않습니다. 마침내 테이블 상단에 여백이 추가되어 겹치지 않게됩니다.

Answer 3

나는 확실하지 않다이게 당신이 찾고있는 경우 귀하의 설명에 따르면 귀하는 thead을 항상 페이지 상단에 표시하려고하고 있음을 이해합니다. 여기에 내가 생각해 낸 것이있다.

thead { 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: white; 
} 
table { 
    margin-top: 30px; 
} 

DEMO

는 _ 당신이