HTML table with fixed headers?
코드의 많은 색다른 조각을 어느 거대한 자바 스크립트의 금액과의 조정, 또는
이 정직하게 CSS 해킹 등의 바보 같은 금액을 요구, IE에서 작동하지 않는, 경우 오는 것 같습니다 그것은 CSS 해킹이나 자바 스크립트의 경우, 나는 자바 스크립트 옵션을 선호하는 것 같아요.
같아요 대안이 사업부에 모두 배치하고 단지 전체 테이블을 이동하는 것입니다 -하지만 그건 NAFF 비트 : D 내가 솔루션이 TBODY에 대한 명시적인 높이를 설정하는 것입니다 있다고 생각
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
이렇게하면 스크롤 가능한 테이블 아래에 고정 된 열 머리글이 만들어집니다. 트릭은 overflow 속성이 auto로 설정된 태그에 스크롤하려는 테이블을 포함시키는 것입니다. 내부 테이블의 내용이 주변의 높이보다 클 때 브라우저가 스크롤 막대를 표시하도록합니다.
내부 테이블이 스크롤 바를 수용 할 수 있도록 외부 너비가 너비보다 커야합니다. 일부 사용자는 스크롤바를 기본값보다 넓게 또는 작게 설정할 수 있기 때문에 정확히하기가 어려울 수 있습니다. 그러나 20-30 픽셀 정도 차이가 나면 대개 스크롤 막대를 잘 표시 할 수 있습니다.
CSS-Tricks는 JavaScript와 CSS를 사용하여 강조 표시를 사용하는 방법에 대해서도 설명합니다. 여기에 해당 링크가 article입니다.
이 방법은 효과가 있지만 접근성 측면에서는 좋지 않습니다. 테이블 머리글 (
필자가 수동으로 각 열의 너비를 정의하면 실제로 여기에 자리를 잡습니다. pmc는 액세스 가능성에서 이상적이지는 않지만 내가 본 모든 솔루션 중 모든 것이 여기에 해당됩니다. 많은! – Nick
테이블이 단단히 묶여 있다면, 이것은 제대로 나오지 않는 것 같습니다. – quillbreaker
및 overflow를 auto 또는 scroll으로 설정하십시오. 불행하게도, 테이블과 CSS는 까다로운 조합이며, IE는 그것을 조급 거리고 싶어합니다.
열 너비를 수정할 수 있다면 훨씬 쉽습니다. 브라우저가 너비를 알아 내길 원한다면 훨씬 더 어려워진다. 기본적으로 스크롤 할 div의 테이블 (높이, 오버플로 : 자동)을 가지며 해당 div가 위치 : relative div에 있어야합니다. 바깥 쪽 div에 다른 div 위치를 지정합니다. absolute, overflow : hidden, height : 머리글 높이가 무엇이든 div의 innerHTML을 inner div의 innerHTML로 설정합니다. 여기에 설명하는 페이지가 있습니다. gotchas가 많이 있지만, 할 수있어 ...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
새로 고침과 데이터 크기가 변경되면 헤더가 완벽하게 일치합니다. 그것은 진정한 속임수입니다.
나는 그것이 어떻게 작동하는지 이해하지 못한다. 그래서 검은 마법이어야한다. 더 심각하게는 TH 태그의 높이와 secondWrapper의 높이로 작동시켜야했습니다. 테이블이 최대 너비 98 % 정도라면 테이블과 스크롤바가 서로 부딪치지 않게하는 것이 좋습니다. 어쨌든 어떻게 얻었습니까? 정말 영리합니다. – quillbreaker
다른 사람에게 : 편집 가능한 요소가있는 테이블이있는 경우이 메서드는 테이블을 복사하여 요소를 복사합니다. 당신은 경고를 받았습니다. – quillbreaker
잡화가 많이 있습니다. 이 코드로 작업 한 후에는 프로덕션 코드에서 사용하기에 충분히 안정적이지 않다고 생각합니다. 그래도이 답변에 대한 내 투표를 변경하기에는 너무 늦었습니다. – quillbreaker
Sitepoint에 이런 유형의 퀴즈가 있었지만 비 JS 솔루션을 찾는 사람들에게도 도움이되었습니다. 그러나 나는 테이블의 바닥 글이 셀의 내용이 충분히 넓지 않은 경우 표 너비가 붕괴되지 않도록하기 위해 필요하다는 것을 발견했습니다. 나는 이것을 사용했던 응용 프로그램에서 tfoot를 숨겼습니다.
순수 HTML/CSS이고 IE6 및 최신 브라우저에서 작동합니다. 헤더에는 몇 가지 스타일 제한이 있습니다.
나는 당신이 원하는 것을 정확히 수행하는 jQuery 플러그인을 만들었습니다. 매우 작은 크기로 구현하기가 쉽습니다.
필요한 것은 thead와 tbody가있는 테이블입니다.
클래스 이름을 사용하여 DIV에 해당 테이블을 래핑 할 수 있으며 테이블은 항상 해당 div에 맞게 크기가 조절됩니다. 예를 들어 div가 브라우저 창과 함께 비례면 테이블도 마찬가지입니다. 스크롤 할 때 헤더가 고정됩니다. 꼬리말이 고정됩니다 (바닥 글을 사용하는 경우). 바닥 글의 머리글을 복제하여 고정시킬 수도 있습니다. 또한 브라우저 창을 너무 작게 만들고 모든 열을 맞출 수 없으면 가로로 스크롤 할 수도 있습니다 (헤더도 마찬가지).
이 플러그인을 사용하면 브라우저가 열의 크기를 조정하여 고정 너비 열이 아닐 수 있습니다.
다음과 같이 DIV의 클래스 이름을 $ ('. myDiv')와 같이 전달하면됩니다. fixedHeaderTable ({footer : true, footerId : 'myFooterId'}); 플러그인이 나머지 작업을 수행합니다. FooterID는 바닥 글의 마크 업이 포함 된 페이지 요소입니다. 페이지 매기기를 바닥 글로 사용하려면이 옵션이 사용됩니다.
페이지에 여러 개의 테이블이있는 경우 고정 헤더가 필요한 각 테이블에 대해 작동합니다.
여기에 확인해 :
http://fixedheadertable.mmalek.com/ 마음에 그 여전히 '베타'그래서 나는 매일 새로운 기능과 버그 수정을 추가하고 보관하십시오.
지원되는 브라우저 :이 방법에 대해 Frozen table header inside scrollable div
:
IE6, IE7, IE8, 파이어 폭스, 사파리, 그리고 여기에크롬
같은 질문을했다 다른 사람에게 내 대답에 대한 링크입니다<table style="width: 400px;">
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>
좋은 생각이지만 작동하지 않습니다. http://jsfiddle.net/f22uoxqb/ – simmer
Dup : http://stackoverflow.com/questions/673153/html-table-with-fixed-headers –