[html/css] table에서 thead고정 tbody스크롤 구현

html/css 만으로 완벽하게 모든 브라우저에서 동일하게 보이도록 만들기는 불가능하지 않나요?;
물론 thead 부분과 tbody 부분을 분리한 html 마크업을 통해서는 가능하기는 하지만 그리 현명한 방법은 아니죠.. 더 좋은 방법이 있는지는 모르겠지만 검색을 통해 찾은 방법입니다.

* IE 계열 브라우저에서 caption 부분이 thead 부분에 노출 되고, thead 에 스타일 시트가 제대로 먹히질 않습니다.

아래 코드를 보시면 아시겠지만 테이블을 2개의 div로 감싸면서 가장 밖의 div.table-wapper를 기준으로 table의 thead tr 을 절대위치(absolute)에 배치하는 방법입니다.
누구나 생각해봤을 만한 방법이고 누구나 시도해봤을 만한 방법입니다. 그리고 브라우저별 차이로 포기했겠고요.. ㅎ

.table-wapper { position: relative; width: 300px; padding: 40px 0 20px; background: #eee; }
.table-container { width: 300px; height: 200px; overflow: auto; }
table.table-content caption { position: absolute; top: 0; left: 0; width: 274px; height: 20px; text-align: center; background: yellow; }
table.table-content thead tr { position: absolute; top: 20px; left: 0; height: 20px; }
table.table-content th,
table.table-content td	{ width: 90px; padding: 0; background: #fff; }
table.table-content tfoot td { position: absolute; bottom: 0; left: 0; width: 276px; text-align: center; background: yellow; }

결국엔 javascript 의 힘을 빌리는 방법밖에 없다는 결론을 내리고 검색하다보니 같은 문제를 고민한 사람들이 상당히 많았나 봅니다. 도메인까지 사서 jQuery 플러그인을 제작해 배포하는 곳이 있었습니다.
사용법 또한 간단합니다. thead와 tbody를 구분한 테이블 태그를 일반적으로 작성하고 아래 처럼 스크립트를 적용해 줍니다.

간단하네요; 진작에 이걸로 할걸 그랬나 봅니다…

결론; html/css 만으론 좀 무리네요.;