테이블 본문을 스크롤하면서 머리를 고정시키는 방법은 무엇입니까? 머 무르려면 테이블 상단에 헤더가

설정된 크기를 유지하기 위해 HTML 테이블이 필요한 페이지를 작성 중입니다. 나는 항상 거기에 머 무르려면 테이블 상단에 헤더가 필요하지만 테이블에 추가 된 행 수에 관계없이 스크롤하려면 테이블 본문이 필요합니다. 엑셀의 미니 버전을 생각하십시오. 이것은 간단한 작업처럼 보이지만 웹에서 찾은 거의 모든 솔루션에는 몇 가지 단점이 있습니다. 이 문제를 어떻게 해결할 수 있습니까?

답변

나는 같은 대답을 찾아야했다. 내가 찾은 가장 좋은 예는 http://www.cssplay.co.uk/menu/tablescroll.html 입니다 . 예 2는 저에게 효과적이었습니다. 자바 스크립트를 사용하여 내부 테이블의 높이를 설정해야하며 나머지는 CSS입니다.

답변

DataTables 가 매우 유연 하다는 것을 알았습니다 . 기본 버전은 jquery를 기반으로하지만 AngularJs 플러그인도 있습니다.

답변

나는 비슷한 질문에 대한 Sean Haddy의 훌륭한 솔루션을 보았고 약간의 편집을 자유롭게했습니다 .

  • 하나의 jQuery 스크립트를 한 페이지의 여러 테이블에 재사용 할 수 있도록 ID 대신 클래스를 사용하십시오.
  • 캡션, thead, tfoot 및 tbody와 같은 시맨틱 HTML 테이블 요소에 대한 지원 추가
  • 스크롤바를 옵션으로 만들었으므로 스크롤 가능한 높이보다 “짧은”테이블에는 나타나지 않습니다
  • 스크롤 막대를 테이블의 오른쪽 가장자리로 가져 오도록 조정 된 div 너비
  • 접근 가능한 컨셉
    • 삽입 된 정적 테이블 헤더에서 aria-hidden = “true”사용
    • jQuery로 숨기고 원래 thead를 그대로두고 설정하십시오. aria-hidden="false"
  • 크기가 다른 여러 테이블의 예 표시

하지만 Sean은 힘든 일을했습니다. tft를 지원해야한다는 지적을 해준 Matt Burland에게도 감사드립니다.

http://jsfiddle.net/jhfrench/eNP2N/ 에서 직접 확인하십시오.

답변

overflow : scroll을 사용하여 thead와 tbody를 사용하고 tbody에 고정 높이를 설정해 보셨습니까?

대상 브라우저는 무엇입니까?

편집 : 파이어 폭스 (거의)에서 잘 작동했습니다-세로 스크롤 막대를 추가하면 가로 스크롤 막대가 필요했습니다. IE는 각 td의 높이를 내가 tbody의 높이를 지정한 것으로 설정했습니다. 내가 얻을 수있는 최선의 방법은 다음과 같습니다.

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>

답변

필요한 것은 :

1) 내용이 스크롤 창보다 큰 경우에만 스크롤이 발생하므로 높이가 제한된 테이블 본문을 갖습니다 . 그러나 tbody크기를 조정할 수 없으므로 다음과 같이 표시해야합니다 block.

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) 테이블 헤더와 테이블 본문 열의 너비 를 다시 동기화block 하여 관련이없는 요소로 만듭니다. 그렇게하는 유일한 방법 은 동일한 열 너비를 둘 다 에 적용하여 동기화를 시뮬레이션 하는 것 입니다.

그러나 tbody그 자체가block 지금이므로 더 이상처럼 동작 할 수 없습니다 table. table열을 올바르게 표시 하는 동작 이 여전히 필요하므로 솔루션은 각 행을 개별 tables 로 표시하도록 요청하는 것입니다 .

thead {
   display: table;
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

이 기술을 사용하면 더 이상 행을 가로 질러 확장 할 수 없습니다.

이 작업이 완료되면 열 너비가 모두 같은 너비를 갖도록 할 수 있습니다 thead 와 tbody. 당신은 할 수 없었습니다 :

  • 각 열에 대해 개별적으로 (특정 CSS 클래스 또는 인라인 스타일링을 통해) 각 테이블 인스턴스에 대해 매우 지루한 작업입니다.
  • 모든 열에 대해 균일하게 th, td { width: 20%; } 예를 들어 5 개의 열이있는 경우를 ),보다 실용적이지만 (각 테이블 인스턴스에 너비를 설정할 필요는 없지만) 열 수에 대해 작동하지 않습니다
  • 고정 된 테이블 레이아웃을 통해 모든 열에 대해 균일하게 계산됩니다.

마지막 옵션을 선호하며 추가해야합니다.

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

이 질문에 대한 답변에서 나온 데모를 여기 에서 보십시오 .

답변

편집 :   이것은 매우 오래된 대답이며 2000 년대에 한 번 지원되었지만 2010 년의 브라우저 전략이 일부 기능이 제거 된 경우에도 W3C 사양을 준수해야했기 때문에 번영을 보였습니다. 고정 헤더가있는 스크롤 가능한 테이블 / footer는 HTML5 이전에 서투르게 지정되었습니다.

나쁜 소식

불행히도 HTML / CSS 사양이 그 기능에 대해 명확하지
않기 때문에 고정 thead/로 스크롤 가능한 테이블을 처리하는 우아한 방법 은 없습니다tfoot .

설명

하지만 HTML 4.01 사양은 말한다 thead/ tfoot/이 tbody(? 소개) 스크롤 테이블 본체에 사용된다 :

THEAD, TFOOT 및 TBODY 요소 […]를 사용하여 테이블 행을 그룹화 할 수 있습니다. 이 분할을 통해 사용자 에이전트는 테이블 헤드 및 풋과 독립적으로 테이블 바디 스크롤을 지원할 수 있습니다.

그러나 FF 3.6에서 작동하는 스크롤 가능 테이블 기능은 HTML / CSS 사양을 준수하지 않기 때문에 버그로 간주되므로 FF 3.7에서 제거되었습니다. 참조 이 와 있음을 FF 버그에 대한 의견을.

Mozilla 개발자 네트워크 팁

아래는 스크롤 가능 테이블에 대한 MDN 유용한 팁 의 단순화 된 버전입니다.
이 아카이브 된 페이지 또는 현재 프랑스어 버전을 참조하십시오.

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

그러나 MDN은 이것이 FF에서 더 이상 작동하지 않는다고 말합니다 🙁
IE8에서도 테스트했습니다 => 테이블도 스크롤 할 수 없습니다 :-((

답변

누구든지 여전히 이것을보고 있는지 확실하지 않지만 이전에 내가 한 방법은 두 개의 테이블을 사용하여 단일 원본 테이블을 표시하는 것입니다. 첫 번째는 원래 테이블 제목 줄과 테이블 본문 행 (또는 빈 본문 행)입니다. 확인).

두 번째는 별도의 div에 있으며 제목이 없으며 원래 테이블 본문 행만 있습니다. 그런 다음 별도의 div를 스크롤 가능하게 만듭니다.

div의 두 번째 테이블은 HTML의 첫 번째 테이블 바로 아래에 있으며 고정 헤더와 스크롤 가능한 하단 섹션이있는 단일 테이블처럼 보입니다. Safari, Firefox 및 IE (Spring 2010의 최신 버전)에서만 이것을 테스트했지만 모두 작동했습니다.

유일한 문제는 첫 번째 테이블이 본문 (W3.org 유효성 검사기-XHTML 1.0 엄격)없이 유효성을 검사하지 않으며 내용이없는 테이블을 추가하면 빈 행이 발생한다는 것입니다. CSS를 사용하여 이것을 보이지 않게 할 수 있지만 여전히 페이지의 공간을 차지합니다.