스크롤 가능한 표 본문 내 머리글 및 바닥 글

thead, tbody 및 tfoot가있는 테이블 인 페이지에 위젯을 만들려고합니다. 위젯이 너무 커지려고하지 않기 때문에, tbody가 많은 행을 갖는데 약 200px보다 길다면, 테이블 안의 행을 스크롤 가능하게하고 싶습니다.스크롤 가능한 표 본문 내 머리글 및 바닥 글

저는 jQuery 1.9.1을 사용하고 있지만 가능하다면 순수 CSS/HTML 솔루션을 선호합니다.

누구나 쉽게 해결할 수 있습니까?

출처

2013-04-08 Luke Sapan

오버플로 CSS 선언을 사용합니다.

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
<div id="wrapper" style="height:100px;width:100px;overflow:auto;"> 
<div id="widget"> 

<table> 
<tbody> 
    <tr> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
    </tr> 
    <tr> 
     <td>more blah</td> 
     <td>etc</td> 
     <td>etc</td> 
     <td>etc</td> 
     <td>etc</td> 
     <td>etc</td>  
    </tr> 
    <tr> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
    </tr> 
</tbody> 
</table> 

</div> 


</div> 




</body> 
</html>

출처

2013-04-08 01:13:45

문제는 테이블의 내용 ("tbody") 만 스크롤하는 것입니다. 테이블의 머리글과 바닥 글 ("thead"및 "tfoot")은 제자리에 있어야합니다. –

당신도 tbody를 포함한 모든 것에 동일한 선언을 추가 할 수 있습니다 :) –

나는이 CSS를 시도 : table.scheduleWidget tbody { \t 너비 : 250px; \t 신장 : 30px; \t 오버플로 : 자동; } 하지만 신기하게도 아무 것도하지 않습니다. : –

스크롤 가능한 표 본문 내 머리글 및 바닥 글

답변

관련 문제