Craig McQueen
그는 물었다 11년 전
167

창 맨 위에 큰 테이블이 볼 때 항상 가시적입니다 헤더도 html 표

Tweak&quot &quot 수 있어야 하고 싶다;; # 39 의 프레젠테이션입니다 html table& 단일 기능을 추가할 수 있습니다. 페이지 테이블 (table) 를 통해 화면 아래로 스크롤하지 때 도왔으매 켜있을 계속 볼 수 있다 그러나 헤더입니다 행뿐만 보이지 않는 이 보기 영역 상단의 헤더도 싶다.

이 같은 고정 panes&quot 약간만이라도 개념적으로 "; 기능을 한다. 하지만 html 페이지 테이블을 포함할 수 있습니다 또한 여러 테이블의 에보기, 다시는 이런 그녀의심장을 단지 현재 있을 때만 에보기 있다.

참고: # 39 한 테이블에 있는 솔루션, 데이터 영역은 i& ve seen scrollable 브라운아저씨의 헤더도 동안 스크롤하지 않습니다. # 39, m, s not I& that& # 39 이 솔루션을 찾고 있습니다.

lock
그는 11년 전 댓글을 달았습니다
0

페이지 테이블을 사용하는 고안되었습니다 됩니까? 를 먼저 迈向 변환할지 가능한 것은 표 데이터 떠나고 혼자 테이블에 대한?

mkoryak
그는 8년 전 댓글을 달았습니다
5

나는 이번에 이 작업을 수행하는 플러그인을 썼다. http://programmingdrunk.com/floatThead/

DanO
그는 7년 전 댓글을 달았습니다
1

탑 투표 외에, s & # 39 위 아래, it 솔루션 및 파생상품 @mkoryak 플러그인에는 역시 상당히 좋다. 살펴보기 전에 반드시 너무 shopping&quot 스크립트종료 ";).

mkoryak
그는 7년 전 댓글을 달았습니다
0

댄 감사합니다:) 킥 애스 기능이 너무 다음 릴리스에는 받긴 예정되어 있습니다.

w5m
그는 4년 전 댓글을 달았습니다
0

I 이 @mkoryak ss+sp 플로이트헤드 플러그인에는 통합하고 신속하게 대응하기 위해 내가 할 수 있었다. 이 플러그인에는 대량량 주셔서 감사합니다!

답변 11 개

개념 증명 솔루션, ve 브라운아저씨의 i& # 39 를 사용하여 jQuery.

보기입니다 here. 샘플링합니다

39, ve 이제 i& 맡을게 코드에서 머큐리얼 비트포켓 리포지토리를. 주요 파일이 '타바레스.사믈'.

39 m, 한 가지 문제는 대체하십시오 i& 잘 알고 있다. 테이블에는 아나운서 앵커 url 을 열 경우, 지정된 경우, 브라우저에 의해 가려진 될 가능성이 있는 페이지를 보면 로드되는지 행, 앵커 부동 헤더입니다.

  • 업데이트 11-12-2017 t # 39, 내가 이 슬라이드에서는 doesn& :* (57) 씨와 함께 작업하므로 현재 파이어폭스, 크롬 (63). 이 시기 및 방법, 또는 왜 중지함 apc® 해결하십시오 확실하지 않다. 근데 이젠 할 것 수락됨 의해 오토메이티드 헨드리 이르 완 우위에 있다.
Craig McQueen
Nalum
그는 10년 전 댓글을 달았습니다
0

나는 내가 필요로 하는 이 생각하신거야. 큰 도움이 됐습니다. # 39 를 사용하여, t 는 창을 통해 내가 wasn& 내거냐 스크롤하지 창뿐만 div 안에 html. 그래서 '플로팅헤드로이크스 변경하십시오 (&quot, top", 마테오밍 (스테롤토프 - 프세스토프, $ (이) 이하이트 () - 플로팅헤데로지에이트 ()) + &quot px";)', '을 플로팅헤드로이크스 (,,, &quot top&quot 스테롤토프 + &quot px&quot),' 와 코드 페이지 테이블 (table) 은 궁극적으로 더 아래쪽으로 헤더입니다 했습니다 공략하라 사라지는 끕니까 호출이네요

JonYork
그는 9년 전 댓글을 달았습니다
1

나는 내 테이블을 구현하기 위해 노력하고 있다.

나는 헤더입니다 너비입니다. 문제가 있습니다. 이 같은 데이터베이스 (db), 이 값은 data-in 행뿐만 가져오기되었습니다 무순서 길이 있다.

하지만 그 전에 이 헤더는 자동 상속됨 크기, 그 후에는 스크롤하십시오 스크롤하십시오 크기조정 헤더 이름, 그리하여 그들은 훨씬 작은 너버 헤더도 감싸기 때문에, 실제로 해당 헤더도 don& t # 39 위에 추적되도록 얻어맞았다.

이 문제를 해결할 수 있습니까?

Craig McQueen
그는 9년 전 댓글을 달았습니다
0

39 m, 온데간데없군 I& 따라 설명 잘 모르겠습니다. 예를 들어, 내가 제안하세요 1) 가능하면 온라인 표시 2) 스택 오버플로 하나님께용서를 대한 질문을 받고 있다.

aexl
그는 9년 전 댓글을 달았습니다
0

난 이미 @jonyork 똑같은 문제를 해결할 수 있습니다. 내 문제, td&gt &lt 사용하고 있었습니다. 대신 th&gt 헤더의 <; 따라서, s, t 각 column& couldn& # 39 적용하십시오 # 39 를 th&gt 너버 존재하지 않는 <; (기존 헤더입니다 '에서' / / 코드 부분을 셀 폭 복제본에 참조). 그래서 이 실수로 @craig 매퀸 편집하십시오 아무도 모르게 대답을 한다.

Richard Żak
그는 6년 전 댓글을 달았습니다
0

When I use your @craigmcqueen 뛰어난 코드 (감사합니다) 이 배후에 있는 나는 브레이크를 두 번째 표는 다른 탭 (tab 플러그인에는 포함한다). 모든 생각을? 언제나 헤더를 따르는 대신 왼쪽 끝에 놓인 위치를 열. 하지만 완벽하게 작동됨 jQuery 의 첫 번째 테이블에서 shift+tab.

Craig McQueen
그는 6년 전 댓글을 달았습니다
0

이런 문제가 될 수 있다면 @richardżak 데모를 점, 나에게 도움이 된다.

khaverim
그는 6년 전 댓글을 달았습니다
0

이는 균등형 아웃해야 멋집니다. 테이블에 있는 경우를 제외하고는 이미 랩된 div 와 같이 오버플로입니다: auto 내 건으로 집계됐다. 매우 슬프다. 모든 쉽냐구요 solution for this? 내가 업로드했을 데모를 비트포켓: https://bbuseruploads.s3.amazonaws.com/dfranzcodin/sadtable/downloads/tableShame.html =, =, = 140098145 4&amp 아프스카세스케이드 0emwefsga12z1hf1tz82 폐기합니다 2ftzdsexb1m8%3d&amp guvvmjhw6ie1lxsj% 서명입니다?

Craig McQueen
그는 6년 전 댓글을 달았습니다
0

@khaverim: # 39, t couldn& 데모 내가 attaboy 액세스 거부 오류가 나는 볼 수 있습니다.

khaverim
그는 6년 전 댓글을 달았습니다
0

@CraigMcQueen 조사하고 있는 주셔서 감사합니다. 이것은 apc® https://partner. 정보기술 (it) 은 사용자의 js 스크립트입니다 베르바툼 이번에는 '자동' 의 첫 번째 테이블은, div&gt, ':' &lt 랩된 오버플로입니다: http://captainscall.site11.com/sadtable.html. 실제로 이 문제를 해결할 수 있다면 매우 감사하고 싶다

Craig McQueen
그는 6년 전 댓글을 달았습니다
0

네, 알겠습니다 점이다. # 39 m 이 시점에서 미얀요 i& 솔루션을 확실하지 않습니다. 스택 오버플로 대한 질문을 받고 이를 위해 별도의 하나님께용서를 잘해야 됩니다.

tommy.carstensen
그는 4년 전 댓글을 달았습니다
0

Cool! 내가 할 수 있는지, 또 다른 비슷한 달성됩니다 하나님께용서를 스레드할 처음으로 열 테이블 (또는 n).

Øyvind Bråthen
그는 4년 전 댓글을 달았습니다
0

아주 좋아. 여기에 대해 감사를 일을 함으로써 타인을 위해 사용할 수 있습니다. # 39, 면적 you& 챔프!

Eric
그는 4년 전 댓글을 달았습니다
0

@CraigMcQueen 이해해주셔서 감사합니다 - 그것은 여러 개의 &lt 협력했습니다 유일한 심아이엔큐 TR>; # 39 을 사용하고 있는 THEAD COLSPAN 이 TH&. 아름다운 작동됨. 너무 감사합니다!

Bhuvan Arora
그는 2년 전 댓글을 달았습니다
0

이 때 이 애니메이션 누락되었는지 고수하고 있지만, 그것은 매우 양호해 플러그인에는 준활성 헤더입니다.

크레이그, 내가 조금 더 정교하게 코드에 중에서 몇 가지 다른 창조하셨노 it& # 39 을 사용하여 지금 포지셔닝하십시오: 고정식입니다) 와 이를 플러그인에는 랩된 포함한다.

종료기 아웃해야 있습니다. http://jsfiddle.net/jmosbech/stFcx/

소스 의 성능을 높이고 있습니다. https://github.com/jmosbech/StickyTableHeaders

Craig McQueen
그는 9년 전 댓글을 달았습니다
1

Jquery 플러그인에는 만들기 위해 좋습니다. 몇 가지 질문: (1) 작동합니까 잘 수평으로 스크롤하십시오? (2) How does it 동작할 때 그 아래의 테이블은 스크롤하십시오 스크롤하지 끕니까 상단형 창? # 39, 이 중 테스트 허용하시겠습니까 doesn& 예는 없다.

ericslaw
그는 9년 전 댓글을 달았습니다
0

하지만 코드 진단트리로 예를 갖추어 타바레소터 너회의 이스피들 작동됨 깃허브 타바레소터 코드를 수정할 수 없습니다. 드셨어요?

jmosbech
그는 9년 전 댓글을 달았습니다
0

크레이그, 수평으로 스크롤하십시오 shouldn& # 39, 이후 재 포지셔닝 수평과 수직으로 모두 문제가 될 것은 헤더입니다 t 의 스크롤하고 크기조정할. 이와 함께 두 번째 질문: 이 때 헤더입니다 숨겨짐 테이블 찻입 뷰포트에.

jmosbech
그는 9년 전 댓글을 달았습니다
0

39 의 에릭, that& 이상하다. 깃허브 /demo/tablesorter.htm 열려고 하는 아니하였으매 에서? # 39, t 타바레소터 haven& 내가 수정한 암호라고 만들기 위해 필요한 it 작동합니까 적용하십시오 전에 스티키타바레이더 플러그인에는 타바레소터.

jmosbech
그는 9년 전 댓글을 달았습니다
0

에릭 &amp. 크레이그, I& # 39 에서 발생하는 현상에 대해 설명하기 위해 타바레소터 데모, ve 수정한 깃허브 수평 및 수직 스크롤하고 업로드됨 그 [here] (http://173.dk/stickytableheaders/demo/tablesorter.htm) - let me give it a 박으래도 및 회전 및 다운로드되었는지 뭔가 doesn& # 39, t 로 일하는 것으로 나타났다.

pavel_kazlou
그는 9년 전 댓글을 달았습니다
0

39 doesn& 코드에 사용할 수 있으며, IE (6 일 테스트되었습니다 및 9), t, s # 39 Craig& 정상입니다. 나는 그와 제공한 테스트 페이지 찾아볼 수 있습니다.

jmosbech
그는 9년 전 댓글을 달았습니다
0

Ie9 에서 목마르겠구나 작동하잖아 웃겨요, 파벨, 그게 좋아 좀 더 구체적인 될 수 있어요? # 39 you& IE6 어쨌든요 re 맞았어. # 39 의 사용을 인해 that& 포지셔닝하십시오 고정식입니다.:

gspatel
그는 8년 전 댓글을 달았습니다
0

뛰어난 도와주고 플러그인에는. 잘했어 부트스트랩과 던지는 작동됨 멋지구리해요 및 수리 및 오프셋된 디바이스입니다.

Nathan Phillips
그는 7년 전 댓글을 달았습니다
2

39 는 doesn& 스크롤하지 수 평형, t 는 스크롤할 때 왼쪽 스크롤하지 상당히 거리가 꽤 작동합니까 뒤에을 이 보이지 않는 것은 보통 때보다 더 포지셔닝됩니다 thead 포지셔닝됩니다 일부로 표.

Hendy Irawan
그는 7년 전 댓글을 달았습니다
0

멋져! 크레이그는 흥분됐나요 @jmosbech 및 타렉! ) 이후 우리를 위해 아주 잘 작동됨 lionbridge 위켓 (http://otl. https://github.com/soluvas/soluvas-web/commit/99f808b212437f6e89121e3c8b6941e1ee9554a5) 를 통합하는 라이브러리. 잠시 CSS 의 테이블 부트스트랩에 너무 멋져 보입니다.)

ganders
그는 7년 전 댓글을 달았습니다
0

이 때, 내가 있는 장소를 제외한 멋지구리해요 작동됨 @jmosbech 스크롤하십시오 헤더는 &quot sticky"; 맨 위에 그러하매 it& # 39 의 축소 폭을 머리글 행 중 약 75% 만이 너비입니다 실제 데이터 행을. 제안 사항을?

jmosbech
그는 7년 전 댓글을 달았습니다
0

아마도 a / s, it& @ganders # 39, 국경 축소 국경 간격 배정됩니다. 깃허브 리포 체크아웃합니다 표본의 대한 견본이요. 그렇지 않으면 언제든지 제출됩니다 문제입니다.

ganders
그는 7년 전 댓글을 달았습니다
0

무슨 말을 했는지 @jmosbech 그냥 깨달았습니다. 이 기입란 사이징하는 함께 할 것이다. # 39 m, 이후 국경 기입란 i& 부트스트랩이 사용하여 3. 부모한테 수정하십시오 선 내의 각 th 너버 로리그첼스키스 (& # 39, width& # 39;) 를 사용하여 대신 로리그첼리위드스 (). 그냥 체크아웃된 너회의 이스피들 변경하십시오 어제부터 다시 크게 보셨어요?

Mike
그는 6년 전 댓글을 달았습니다
0

아주 잘했어. # 39 이것은 상당히 작동합니까 국경 축소 ',' t doesn& 표시되어도 문제입니다.

khaverim
그는 6년 전 댓글을 달았습니다
0

이게 아닌데 왼쪽 상단 데모 페이지 테이블을 사용할 수 있다.

Michael S. Miller
그는 일 년 전 댓글을 달았습니다
0

네가 날 구했잖아 많은 고통을 겪고 있다. 감사합니다!!

체크아웃하려고 제크리스플로이트헤드 ( 데모 support. ), 이것은 매우 준활성 작업을 할 수 있으며, 심지어 작동합니까 데이터 테이블 너무 내의 '오버플로입니다: 자동 '컨테이너입니다.

Craig McQueen
그는 7년 전 댓글을 달았습니다
0

수평 작동합니까 스크롤하지?

mkoryak
그는 7년 전 댓글을 달았습니다
0

예, 창, 내부 스크롤하고 창을 통해 작동하잖아 수평으로 스크롤하십시오 스크롤하지 크기조정.

Michel Ayres
그는 6년 전 댓글을 달았습니다
0

바이올린 사용한 코드를 추가할 수 있다. (내가 알고 있는 사이트 안에는.)

mkoryak
그는 6년 전 댓글을 달았습니다
11

39, ve 구축됨 i& 거대한 데모 / 문서 호출이네요 왜 바이올린 필요하십니까?

Eugene Kardash
그는 6년 전 댓글을 달았습니다
0

하지만 1, 2 열 폭 유지되는 것은 오로지 jQuery 작동하잖아 포함한다. 버그?

Alastair Maw
그는 6년 전 댓글을 달았습니다
0

39, 이 모든 것은 매우 좋은 doesn& &quot 작동합니까, 디스플레이: flex&quot. 레이아웃 (즉, 테이블 가득 채우는 세로일 스케쳐내 할 수 있는 공간. 따라서, 래퍼 div 가 &quot 포지셔닝하십시오 :-/ 때문이다. relative&quot. 좋은 경기를 할 수 있는 t # 39, doesn& 있는 것 같다.

mkoryak
그는 6년 전 댓글을 달았습니다
0

39, & # 39 의 display:flex& 해결하십시오 있습니다. 추가 1 문제, 즉 css 규칙을 (이 슬라이드에서는 토론: https://github.com/mkoryak/floatThead/pull/45)

userfuser
그는 5년 전 댓글을 달았습니다
0

39 에서 Firefox 를 개발, 플로이트헤드 doesn& 최신값 다는일은, 심지어, t, s # 39 의 작동합니까 it& İç 데모 페이지: http://mkoryak.github.io/floatThead/ (단, 입대를 환영한다 관한 모든 열심히 마코리아크)

MustModify
그는 5년 전 댓글을 달았습니다
0

@mkoryak: 빠른 피드백: 기구야 놀랍슴돠 보인다. # 39 표, here& &quot 기대했는데, s, s # 39 너회의 javascript 코드를 너회의 here& code.&quot. 그 당시 모든 일이 javascript. 테이블에서 너회의 참조용이므로 weren& # 39, t 단순해졌습니다. 당시 관련 있는 모든 종류의 클래스뿐만 않았을 수도 있습니다. 내 사이트 및 it didn& # 39 의 복제할지 했으나, 빗나갔다. 전송되었기 경우 더 간단한 예를 그림 있을거라더군요 이유. 따라서 파선-짧은 수 있다면 정말 판타스틱 맨 위에 있는 부트스트래핑 측면에서 샘플링합니다 동일팔레트에 최우수선수 (mvp) 될 것이다. 간단한 예를 볼 수 있기 때문에 전에 내가 정말 하고 싶은 내 사이트 작업할 시간이 너무 많이 했다.

CubicleSoft
그는 4년 전 댓글을 달았습니다
0

흥미로운 대안을 스티키터블헤더스. 마치 내 기준으로 간단한 테스트를 성능 저하 없이 처리할 수 있는 능력을 갖고 있으며 이는 수천 개의 행 데이터 테이블 위, 아래 deltamove 플로이트헤드 활성화되었습니다. Ll give it a 소용돌이 때, 나는 아마 i& # 39 시간입니다.

mkoryak
그는 4년 전 댓글을 달았습니다
5

스택 오버플로 물어 질문을합니다 배치하십시오 @mustmodify 것은 좋지 않다. 깃허브, 그 방법에 대한 질문에 대한 문제가 있더라도 그냥 보고하십시오 이해했소 작업 중. 일반적으로 목격하고서야 잡깐 병이 있는 날. 아마 여기서 바로 아래에 있는 것에 대해 연간:)

mkoryak
그는 4년 전 댓글을 달았습니다
1

테이블에 대한 예의 그 가치가 @mustmodify 뭐하러요 클래스뿐만 관련이 없었다. Css 를 사용할 수 있기 때문에, 또는 클래스 내 문서 말하도다 플러그인에는 필요하지 않습니다.

Parminder
그는 일 년 전 댓글을 달았습니다
0

그 사람이 나를 @mkoryak 기구야 초예요 득점을 얻을 수 있는 긴 대기 중 많은 도움이 되었습니다.

39 한 경우, re 현대 css3 호환일 브라우저 ( 있지만브라우저에 support: you& https://caniuse.com/ # 성과 = css 스티커) '스티커' 를 사용할 수 있습니다: # 39, js 및 won& 포지셔닝하십시오 doesn& t, t break the # 39 번째 및 td 미스 정렬 필요한 테이블 레이아웃 같은 얻어맞았다. 이 열 필요가 없으며 고정식입니다 너버 정상적으로 작동합니다.

  • 단일 헤더입니다 row:* 예

thead th
{
    position: sticky;
    top: 0px;
}

  • 1 개 또는 2 의 thead 행뿐만 this:* 같은 항목을 사용할 수 있습니다.

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

  • 상위 함께 플레이 할 수 있습니다 * 재산에 마지막 하위 비트 수를 변경하는 픽셀입니다 일치시킵니다 높이 첫 번째 행 (+ + + 패딩, 여백을 국경에 있는 경우), 그래서 그냥 아래로 벨로 (스틱 두 번째 행에 첫 번째.

또 하나 이상의 테이블 솔루션뀉뀉뀉뀉 작동합니까 있는 경우에도 모두 동일한 페이지: 한 때 'th' 는 최고 시작할 수 있는 요소 중 하나는 각 포지셔닝하십시오 timerevent 정의 및 css 를 만들어낸 모든 표 때 그냥 사라지는 족자 아래에있어. 만일 모든 효율적인 작업 방식과 동일하게 표 더 많다.

이후 첫 아이 및 css 에서 전에 마지막 하위 사용하는 이유는?

Css 규칙을 브라우저에서 렌더링됩니다 것과 같은 순서로 쓰기 때문에 그들을 꽂으십시오 css 파일과 경우 이 때문에 불과 1 행 꽂으십시오 thead 요소점 첫 행은 마지막 행은 마지막 하위 무시하려면 동시에 하는 규칙을 너무 및 첫 아이 하나. 없는 경우 30 위에서 어떤 난 오프셋할 겪게 될 행의 여백을 생각해 보자, px don& # 39 싶지 않다.

알려진 문제를 위치: # 39 의 행뿐만 thead 요소 또는 테이블, 스티커 것이 doesn& 빗나갔다. 대상 th 요소를 합니다. 이 문제가 해결될 호핑 미래에 대한 브라우저 버전.

willy wonka
ewh
그는 2년 전 댓글을 달았습니다
0

첫 번째 예제는 아닙니다 작업하십시오 파이어폭스 (61). 그러나, 스티커 포지셔닝하십시오 설정된 thead 않니다.

Teepeemm
그는 일 년 전 댓글을 달았습니다
1

할 수 있는 'th' 타겟으로의 thead tr+tr 두 번째 행.

    • 가능한 대안을
  • 떠 있는 테이블 헤더도 js *

떠 있는 테이블 헤더도 js (google code)

    • 의 드루팔

I have a 드루팔 6 사이트. 내가 올린 관리 &quot modules"; 페이지 테이블, 그리고 만약 이 사실을 알고 정확한 피쳐보다!

라는 파일이 구현한 코드를 바라보는 것 같습니다. ['타바레이드리아스'] [1]. '클래스' 의 모든 기능을 가진 표가 스티커 활성화됨 적용합니다.

39 의 드루팔 사이트를 이용할 수 있는 등 I&; d ['타바레이드리아스'] [1] 모듈에서는 사용자에 대한 있는 그대로의 컨텐트입니다. ['타바레이드리아스'] [1] doesn& 공존할 수 있는 사용자 컨텐츠, t # 39 페이지에 드루팔. 내가 올린 포럼 메시지 # 39 의 테마 그러하매 it& 드루팔 수정하십시오 방법을 물어볼 수 있습니다. 이에 따르면 '타바레이드리아스 drupal_add_js 드루팔 ()' 를 주제로 '추가할 수 있습니다', 's' 를 사용하여 다음과 같이 템플라테스파프 theme& # 39

drupal_add_js('misc/tableheader.js', 'core');

[1]: http://drupalcode.org/viewvc/drupal/drupal/misc/tableheader.js = 수정표시 보기?

Craig McQueen
Vilius Gaidelis
그는 8년 전 댓글을 달았습니다
0

네, 구글 코드에서 https://partner. 쓸모가 가져다줄래요 타전스.

39 이 문제를 매우 i&, ve 접할 수 있다. 죄송합니다. 부모한테 책임질래 2 표, 하나는 헤더나 하나는 바디입니다. # 39 의 it& 없는듯 최고의 외곽진입 판매업체에서 여기 댁이라면:

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

<html>
<head>
    <title>oh hai</title>
</head>
<body>
    <table id="tableHeader">
        <tr>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
        </tr>
    </table>
    <div style="height:50px; overflow:auto; width:250px">
        <table>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
            </tr>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
            </tr>
        </table>
    </div>
</body>
</html>

끝 - &lt 스니핏 >;!

39 이 아닐 수 있지만, s, 나를 위해 협력했습니다 it& 세련된 방식으로 작동합니다. 그래서 뭔가 더 있는지 조사 i& # 39, ll, 내가 할 수 있지만 여러 테이블을 사용할 수 있습니다.

오버플로입니다 에서 검색하기를 검토완료 적절성 여부를 확인하기 위해 필요에 맞게

Sergej
Gab Royer
그는 11년 전 댓글을 달았습니다
0

하지만, ll, i& 온데간데없군 작동안함 # 39 이 문제를 해결하려면 시도하시겠습니까 외곽진입 남아 있으며, 자동 을 속성 오버플로입니다 사용해야 합니다.

Craig McQueen
그는 11년 전 댓글을 달았습니다
0

나는 내가 말한 고맙게 생각할 솔루션과 단순성, 하지만 내 질문에 &quot, 참고: # 39 한 테이블에 있는 솔루션, 데이터 영역은 i& ve seen scrollable 브라운아저씨의 헤더도 동안 스크롤하지 않습니다. # 39 m, s not that& 솔루션 I& 보았으매 for.&quot # 39;;

Farhan
그는 7년 전 댓글을 달았습니다
0

이 w3school @gabroyer 페이지이므로 너회가 referenced, 없습니다.

willy wonka
그는 2년 전 댓글을 달았습니다
0

또 다른 문제가 외곽진입 에로남이네 적응 할 경우 열 중 일부는 다른 컨텐츠를 저장할 수 있는 위험 분할하려면 그들의 맞춤에는 .해당 열 헤더입니다. 이럴 수 있도록 하는 것이 더 나은 인쇄면 이 문제가 좀 있는 컨텐츠가 는 외곽진입 동적 관리 및 상대 앞면이요 열 완벽한 정렬 그래서 포지셔닝하십시오 이럴 = 스티커 는 갈 길.

이거 정말 까다로운 투명지에 스티커 헤더입니다 따라 하는 게 한 표. 전 그 후 같은 요건을 갖추고 있지만 그리드비에프 애플리케이션임대서비스 (asp) 스티커 헤더에 그리드비에프 정말 내가 찾은 것으로 여겨진다. 하지만 이 모든 솔루션을 사용할 수 있으며 여러 가지 솔루션을 충족합니다 그들 중 아무도 저를 데리고 3 일 할 수 있다.

내가 직면하고 있는 주요 현안이 이들 솔루션 대부분이 오프셋합니다 문제가 있었다. 부동, 정렬을 할 때 단순화표현 헤더입니다 헤더입니다 세포와 세포를 바디입니다 짐작이지만요. 꺼져 곡이다.

일부 솔루션, 난 또 가져오는 데 따른 신체의 초래하는 잡을라는데 호관련 헤더입니다 처음 몇 행뿐만 바디입니다 행뿐만 뒤에 감춰진 가져오는 부동 헤더입니다.

이제 나는 내 자신의 논리를 갖고 이를 구현할 수 있지만 이 또한 고려하지 않을 수도 있다, 하지만 이 같은 완벽한 솔루션이므로 도움됐네 누군가를 위해

다음은 샘플링합니다 표.

<div class="table-holder">
        <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
            <thead>
                <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
                <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
                <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
                <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
                <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
                <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
                <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
                <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
                <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
                <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
            </tbody>
        </table>
    </div>

  • 참고 *: & # 39 와 DIV class 속성을 랩된 테이블은 붙여넣습니다 table-holder& # 39 같음;;).

다음은 내가 내 JQuery 스크립트입니다 추가되든지 html 페이지를 헤더입니다.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //create var for table holder
        var originalTableHolder = $(".table-holder");
        // set the table holder's with
        originalTableHolder.width($('table', originalTableHolder).width() + 17);
        // Create a clone of table holder DIV
        var clonedtableHolder = originalTableHolder.clone();

        // Calculate height of all header rows.
        var headerHeight = 0;
        $('thead', originalTableHolder).each(function (index, element) {
            headerHeight = headerHeight + $(element).height();
        });

        // Set the position of cloned table so that cloned table overlapped the original
        clonedtableHolder.css('position', 'relative');
        clonedtableHolder.css('top', headerHeight + 'px');

        // Set the height of cloned header equal to header height only so that body is not visible of cloned header
        clonedtableHolder.height(headerHeight);
        clonedtableHolder.css('overflow', 'hidden');

        // reset the ID attribute of each element in cloned table
        $('*', clonedtableHolder).each(function (index, element) {
            if ($(element).attr('id')) {
                $(element).attr('id', $(element).attr('id') + '_Cloned');
            }
        });

        originalTableHolder.css('border-bottom', '1px solid #aaa');

        // Place the cloned table holder before original one
        originalTableHolder.before(clonedtableHolder);
    });
</script>

마침내 다음은 다소 대한 클래스를 CSS 색상 표시 목적.

.table-holder
{
    height:200px;
    overflow:auto;
    border-width:0px;    
}

.customerTable thead
{
    background: #4b6c9e;        
    color:White;
}

따라서 이 논리는 모든 생각 테이블 위에 해당 페이지를 만들 때 표로 홀더에서 div 와 클론할 홀더에서 dell. 클라이언트 측 로드됨. 이제 남은 헤더입니다 부품 및 포지셔닝하십시오 홀더에서 클론할 인사이드라면 바디입니다 숨김니다 테이블 위에 원래 상태로 헤더입니다.

또한 동일한 솔루션을 asp 그리드비에프 사용할 수 있는 단계를 그리드비에프, 이 두 번 더 추가해야 합니다.

  1. 그리드비에프 객체에는 오노프리어네르 웹 페이지에 있는 경우, 같은 테이블에 설정되었습니다 섹선에서 헤더입니다 행일 타바레이더.

if (null 테이트헤드로! =) { 이. 에드로스터블체션 = 터블로체션스터블헤이더. }

  1. 및 랩 (wrap) '로, div class = &quot table-holder&quot &gt 너회의 격자선 &lt /div&gt <;;;;'.
  • 참고 *: jquery 는 좀 더 추가해야 할 수 있습니다 다음 경우 헤더입니다 통제서 클릭가능 (b) 에서 이벤트를 전달하십시오 스크립트입니다 뚜르산을 클론된 헤더입니다 원래 상태로 헤더입니다. 이 코드는 jQuery 에서 사용할 수 있는 기존 스티커 헤더입니다 플러그인에는 제모스베크 에서 작성
marc_s
khaverim
그는 6년 전 댓글을 달았습니다
0

하지만 많은 대규모 데이터 테이블을 작업량의 +1 좋은 것은 아주 나쁜 클론하려면 전부. 내가 연산뿐 아니하였으매 로드중 상상을 할 시간

'사용하여 디스플레이: 고정식입니다 '를' thead '섹선에서 있으나, 현재 테이블에 보기인 노력해야 할 뿐입니다 작동합니까 JavaScript 도움을 필요로 합니다. 까다로운 것 때문에 장소 및 위치 파악 할 요소 중 하나인 뷰포트에 스크롤하지 기준으로 한 영역을 있지만브라우저에 비호환성이.

Have a look at 가장 인기있는 자바스크립트 프레임워크 (jQuery, 무토레스, 유이, etc etc.) 를 보다 쉽게 할 수 있다면 못하며창조된 그리웠댔지 또는 인컨텍스트 그리웠댔지.

Craig McQueen
그는 11년 전 댓글을 달았습니다
1

충고 고마워 내가 할 수 있는 솔루션을 사용하여 jquery 지켜보리니 my answer.

ericslaw
그는 9년 전 댓글을 달았습니다
0

내가 생각하는 것이 아닌, 하지만 이 및 키워봤지 포지셔닝하십시오 괜찼습니다 근무한 적이 있는 정목 thead 표시할 수 있습니다.

staticsan
그는 9년 전 댓글을 달았습니다
0

내 말은 '포지셔닝하십시오 @ericslaw Ack (예: 고정식입니다 '. 죄송합니다, t # 39 이 didn& 작업하십시오 크롬.

pavel_kazlou
그는 9년 전 댓글을 달았습니다
0

엉망된 내 헤더입니다 너버 시켜버리므로 문제가 있다

전체 화면 테이블을 사용하는 경우, 당신은 아마 관심이 설정값입니다 th 고정식입니다 표시하십시오: 및 상위 0. 또는 시도해보십시오 외곽진입 css 를 통해 매우 비슷하다.

  • 업데이트 *

그냥 빠르게 구축할 apc® 솔루션과 iframe (html4.0). 이 예는 표준 준수, 하지만 쉽지 않은 해결하십시오 할 수 있습니다.

우테리사믈

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>Outer</title>
  <body>
    <iframe src="test.html" width="200" height="100"></iframe>
    </body>
</html> 

테스트리트믈

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>Floating</title>
    <style type="text/css">
      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }
    </style>
  <body>
    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>
        </head>
        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>
    </body>
</html> 

merkuro
a_m0d
그는 11년 전 댓글을 달았습니다
0

39 와 같은 여러 테이블을 아스케르 요청률 won& 빗나갔다.

Sampson
그는 11년 전 댓글을 달았습니다
0

큰 소리, 트루스버트 @a_m0d 요청을 혼란스럽다. # 39, 정보기술 (it), 또는 아스케르 doesn& 미스손더스탠딩 인컨텍스트 우리는 무엇을 원하는지 완전히 이해할 수 없다.

39 의 it& 답답한 것은, t # 39 한 것을 작동됨 멋지구리해요 있지만브라우저에 doesn& 작업하십시오 한다. 파이어폭스, 크롬, IE 에서 아니라 다음 작동합니다.

<table width="80%">

 <thead>

 <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
 </tr>

 </thead>

 <tbody style="height:50px; overflow:auto">

  <tr>
    <td>Cell A1</td>
    <td>Cell B1</td>
    <td>Cell C1</td>
  </tr>

  <tr>
    <td>Cell A2</td>
    <td>Cell B2</td>
    <td>Cell C2</td>
  </tr>

  <tr>
    <td>Cell A3</td>
    <td>Cell B3</td>
    <td>Cell C3</td>
  </tr>

 </tbody>

</table>

Craig McQueen
그는 9년 전 댓글을 달았습니다
4

39 이 i& 하고, m, t # 39 doesn& Firefox 에서 8.0, 정보기술 (it) 할 것 같다. 내용

ceving
그는 4년 전 댓글을 달았습니다
0

Px 는 '어떤'? 사람이 사용하는 것은 기존 유닛 디스플레이 장치에 사용된 할 때 90 일 72 dpi?

willy wonka
그는 2년 전 댓글을 달았습니다
0

I agree. # 39, t 존중하십시오 표준 브라우저 개발자, 죄송합니다. don& 것은 매우 답답한 것은 문제가 생길 때마다. 그리고 몇 년 전보다 더욱 악화시키고! 이제 아예 작동 방식에 문제가 해결되지 등에 더 많은 단계를 브라우저 표준화했습니다 있지만 아직 해야 할 일이 아직. # 39 의 희망과 기도하세 let& :-)

해당 [개념] (http://bitbucket.org/cmcqueen1975/htmlfloatingtableheader/) 를 브라운아저씨의 아주 훌룡했다! 하지만 난 또 늑대굴에서 [이 jQuery 플러그인에는] (http://fixedheadertable.com/) 가 매우 잘 작동하는 것으로 보인다. 이를 통해 희망을!

Craig McQueen
그는 9년 전 댓글을 달았습니다
0
    • 서로 다른 기능을 구현할 수 있는 것처럼 보인다. 말한 것처럼 내 원래 질문: &quot, 참고: # 39 한 테이블에 있는 솔루션, 데이터 영역은 i& ve seen scrollable 브라운아저씨의 헤더도 동안 스크롤하지 않습니다. # 39 m, s not that& 솔루션 I& 보았으매 for.&quot, # 39.
pavel_kazlou
그는 9년 전 댓글을 달았습니다
2

당신이 말한 플러그인에는 엉망 하고 그냥 내 테이블 헤더입니다. # 39, t wasn& 사용할 수 있습니다.