고정 헤더가있는 스크롤 테이블

PHP/HTML/CSS에서이 솔루션을 검색했지만 지금까지 아무 것도 작동하지 않았습니다. 어쩌면 이러한 예제의 상당 부분이 코드의 상당 부분을 차지했기 때문에 아무 것도 할 수 없었습니다. 누군가 내가해야 할 일을 설명하거나 간단한 샘플 코드를 여기에 넣을 수 있습니까?고정 헤더가있는 스크롤 테이블

출처

2012-10-24 Michal S

언어는? –

PHP, 미안 .. 또는 아마도 HTML/CSS로 충분할 수 있습니다. :) –

나는 http://www.imaputz.com/cssStuff/bigFourVersion.html#을 시도했지만 완전히 이해하지 못했습니다. 설명이 없습니다. , 나는 코드의 어떤 부분이 필요한지 알지 못한다. 나는이 코드 블록을 내 코드에 구현하려고 시도했지만 테이블을 완전히 망가 뜨렸다. –

이 코드 (귀하의 의견에있는 링크에서 가져온 것입니다)는 필요한 기본 코드입니다. 다음 번에 그런 종류의 것을 알아 내야 할 때 코드 조각을 제거하여 무엇이 손상되었는지 확인하고 필요한 것을 무너 뜨리지 않는 모든 것을 남겨 둡니다.

<html> 
<head> 
<style> 
div.tableContainer { 
    clear: both; 
    border: 1px solid #963; 
    height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */ 
    overflow: auto; 
    width: 756px /* Remember to leave 16px for the scrollbar! */ 
} 

html>body tbody.scrollContent { 
    display: block; 
    height: 262px; 
    overflow: auto; 
    width: 100% 
} 


html>body thead.fixedHeader tr { 
    display: block 
} 

html>body thead.fixedHeader th { /* TH 1 */ 
    width: 200px 
} 

html>body thead.fixedHeader th + th { /* TH 2 */ 
    width: 240px 
} 

html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */ 
    width: 316px 
} 

html>body tbody.scrollContent td { /* TD 1 */ 
    width: 200px 
} 

html>body thead.scrollContent td + td { /* TD 2 */ 
    width: 240px 
} 

html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */ 
    width: 316px 
} 
</style> 
</head> 
<body> 

<div id="tableContainer" class="tableContainer"> 
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable"> 
    <thead class="fixedHeader"> 
     <tr class="alternateRow"> 
      <th><a href="#">Header 1</a></th> 
      <th><a href="#">Header 2</a></th> 
      <th><a href="#">Header 3</a></th> 
     </tr> 
    </thead> 
    <tbody class="scrollContent"> 
     <tr class="normalRow"> 
      <td>Cell Content 1</td> 
      <td>Cell Content 2</td> 
      <td>Cell Content 3</td> 
     </tr> 
     <tr class="alternateRow"> 
      <td>More Cell Content 1</td> 
      <td>More Cell Content 2</td> 
      <td>More Cell Content 3</td> 
     </tr> 
     ......... 
    </tbody> 
</table> 
</div> 
</body> 
</html>

출처

2012-10-25 05:19:57

정말 고마워요! 나는 아무런 결과도없이 이렇게 많은 시간을 보냈다 :)이 방법은 코드를 이해하는 것이 훨씬 쉽다. :) –

몇 년 전 HTML/CSS/JS를 배울 때 걱정거리가 없었고 여전히 다른 언어들과 함께 있습니다 ... 더 많이할수록 쉽게됩니다. –

고정 헤더가있는 스크롤 테이블

답변

관련 문제