테이블 본문을 스크롤하면서 머리를 고정시키는 방법은 무엇입니까?

148

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

javascript  html  css  html-table 
— 박하
소스
2
거기에 많은 예가 있습니다. 이것 중 하나입니다 .
— Darren Kopp
나는 특히 IE 불행히도 IE6, IE7, FF를 대상으로 필요하지만
— 박하
거기에 많은 CSS 해킹이 있습니다. IE7에서 작업하는 것은 쉽지 않습니다.
— Jim
4
모든 브라우저의 답변에 관심이 있습니다!
— minty
15
"IE7에서 작업하는 것은 쉽지 않습니다." 짐, 너야? 내 프로젝트 관리자입니까? :)
— Aaronius 2016 년

답변:

53

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

— 켄 펜
소스
3
불행히도이 방법은 넓은 테이블 (가로 스크롤)이 있으면 실패합니다. 두 개의 가로 스크롤 막대가 있습니다. 하나는 헤더 용이고 다른 하나는 데이터 용입니다.
— vol7ron
4
<thead> 안에 <th> 너비를 지정하지 않으면 솔루션이 작동하지 않습니다
— Alexandru R
2
(상대적으로) 새로운 스택 오버플로 표준을 준수하기 위해 링크의 관련 비트를 포함하도록이 답변을 편집 할 수 있습니까?
— Fund Monica의 소송
출처는 어디입니까, 빌리?
— 촛대
JavaScript 또는 사전 정의 된 값을 사용하지 않고 헤더와 (스크롤 가능) 테이블 본문 사이의 열 너비를 동기화 할 수 없습니다.
— rustyx
12

나는 비슷한 질문에 대한 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/ 에서 직접 확인하십시오.

— 제로미 프랑스어
소스
좋습니다. 그러나 머리글 과 바닥 글 을 원하면 문제가 해결됩니다 .
— Matt Burland
3
고마워 매트, 나는 조정했다.
— Jeromy French
td와 th 경계를 표시하면 정렬을 조정해야합니다.
— dhochee
8

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
IE6, IE7, FF 등을 타겟팅해야합니다. 그러나 특히 IE는 안타깝게도
— 민트
너비가 100 % 미만이되도록 테이블을 변경하고 99 %라고 말하면 문제를 해결해야합니다.
— WolfmanDragon
2
overflow-x: hidden;및 overflow-y: auto도 도움이됩니다.
— justkt
7
이것은 파이어 폭스에서 작동했으며 명백하고 비 교묘 한 코드입니다. 그러나 최신 버전의 파이어 폭스에서는 고장났습니다.
— Rasmus Kaj
6
"오버 플로우"는 "블록 컨테이너"에만 적용되고 ( w3.org/TR/CSS21/visufx.html#overflow ) 테이블 상자는 "블록 컨테이너"가 아니므로 ( w3.org/TR/CSS21/ visuren.html # block-boxes ).
— mhsmith 2016 년
8

필요한 것은 :

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
}

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

— 자바 롬
소스
설명 주셔서 감사합니다. 이와 같은 방법으로 여러 가지 방법을 수행 할 수 있으며 대부분의 답변은 일부 코드와 plunkr 링크를 나타내므로 스스로 알아낼 수 있습니다.
— Paul Rooney
4

편집 :   이것은 매우 오래된 대답이며 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에서도 테스트했습니다 => 테이블도 스크롤 할 수 없습니다 :-((

— 올리버
소스
스크롤 가능한 테이블 링크에 대한 MDN 팁은 경계 축소에 대해 말하는 관련 정보가 아닙니다. 오년이 통과하기 때문에 어쩌면 페이지 변경했다
— partizanos
감사합니다 @partizanos 마침내 MDN 역사에서 원본 위키 페이지를 찾았습니다! 나의 오래된 대답은 이제 쓸모없는 것처럼 보이지만 번영을 위해 차세대 개발자들은 2000 년대에 구현이 가능하고 쉽게 구현 될 수 있음을 알게 될 것입니다. ;-) Cheers
— olibre
3

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

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

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

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

— 믹
소스
여분의 행은 여전히 ​​공간을 차지합니까? display: none;소스에 공간을 의미하지 않는 한을 사용하면 화면 공간을 차지할 필요가 없습니다 .
— ClarkeyBoy
3

이 솔루션은 Chrome 35, Firefox 30 및 IE 11에서 작동합니다 (다른 버전에서는 테스트되지 않음)

순수한 CSS : http://jsfiddle.net/ffabreti/d4sope1u/

모든 것이 표시되도록 설정됩니다 : 블록, 테이블 높이가 필요합니다 :

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— 페르난도 파브 레티
소스
2

이로 인해 우리의 응용 프로그램에 대해 그러한 그리드를 구현하려고하는 데 큰 두통이 발생했습니다. 나는 다양한 기술을 모두 시도했지만 각각 문제가있었습니다. 가장 가까운 것은 Flexigrid 와 같은 jQuery 플러그인을 사용하는 것입니다 ( http://www.ajaxrain.com 참조) 대안 ) 100 % 너비의 테이블을 지원하지 않는 것 같습니다.

내가 끝낸 것은 내 자신을 굴리는 것이었다. Firefox는 스크롤 tbody요소를 지원 하므로 브라우저가 스니핑하고 적절한 CSS (높이 설정, 오버플로 등 ... 자세한 내용을 묻는다면)를 사용하여 스크롤을 만든 다음 다른 브라우저 table-layout: fixed에서는 크기 를 사용 하는 두 개의 별도 테이블 세트를 사용 했습니다. 명시된 크기를 오버플로하지 않도록 보장되는 알고리즘 (콘텐츠가 너무 넓어지면 일반 테이블이 확장 됨). 두 테이블에 동일한 너비를 주면 열을 정렬 할 수있었습니다. 나는 두 번째 세트를 div 세트로 감싸서 스크롤하고 여백 등이있는 약간의 우스운 포커로 내가 원하는 모양과 느낌을 얻었습니다.

이 답변이 약간 모호하게 들리면 죄송합니다. 시간이 없어서 빨리 쓰고 있어요. 더 확장하고 싶다면 댓글을 남겨주세요!

— 루크 베넷
소스
이 오래된 스레드를 부활시켜 죄송하지만 실제로 어떻게 작동했는지 알아야합니다. FF가 작동하지만 IE / WebKit 브라우저는 작동하지 않습니다. 할 수 있으면 도와주세요.
— Alfero Chingono
2

IE와 FF에서 작동하는 코드는 다음과 같습니다 (적어도).

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

원래 코드를 변경하여 더 명확하게 만들고 IE 및 FF에서도 잘 작동하도록했습니다.

원래 코드는 여기

— 다니엘 코스타
소스
1
IE7 / 8에서는 Quirks 모드에서만 작동하며, doctype을 추가하자마자 작동을 멈 춥니 다.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— ccpizza
1

여기 내 대안이 있습니다. 또한 머리글, 본문 및 바닥 글에 다른 DIV를 사용하지만 창 크기 조정 및 검색, 스크롤, 정렬, 필터링 및 위치 지정을 위해 동기화됩니다.

내 CD 목록

Jazz, Classical ... 단추를 클릭하여 테이블을보십시오. JavaScript가 꺼져 있어도 적절하도록 설정되었습니다.

IE, FF 및 WebKit (Chrome, Safari)에서 정상으로 보입니다.

— 사라질
소스
1

귀하의 질문에 대한 답변을 모두 읽지 못했습니다.

그래 여기 네가 원하는 걸 (이미 해냈어)

비슷한 스타일링을 위해 같은 클래스 이름을 가진 두 개의 테이블을 사용할 수 있습니다. 하나는 테이블 헤드에만 있고 다른 하나는 행에 사용할 수 있습니다. 이제이 테이블을 overflow-y : auto OR scroll로 높이가 고정 된 div 안에 넣으십시오.

— 사 누이
소스
1

위의 제안에서 내가 가진 주요 문제는 tablesorter.js를 플러그인 할 수 있고 특정 최대 크기로 제한된 테이블의 헤더를 플로팅 할 수 있다는 것입니다. 결국 부동 헤더를 제공하고 정렬이 계속 작동하도록 허용 하는 플러그인 jQuery.floatThead 를 우연히 발견 했습니다.

또한 비슷한 플러그인과 비교되는 멋진 비교 페이지가 있습니다 .

— 가이 홀링 턴
소스
1

라이브 JsFiddle

HTML 및 CSS만으로 가능

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <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>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
스 니펫 확장

— 라피
소스
0

JavaScript를 사용해도 괜찮습니다. 모든 열 (픽셀)에 고정 너비의 테이블 세트를 만드십시오. 표에 Scrollify 클래스를 추가 하고이 자바 스크립트 + jquery 1.4.x 세트 높이를 CSS 또는 스타일로 추가하십시오!

테스트 대상 : Opera, Chrome, Safari, FF, IE5.5 ( Epic script fail ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

편집 : 고정 높이.

— 베드로
소스
0

자바 스크립트 (라이브러리 없음) 및 CSS 로이 작업을 수행합니다. 테이블 본문 은 페이지와 함께 스크롤되며 각 열에는 너비가 있어야하지만 테이블은 너비 또는 높이를 고정 할 필요가 없습니다. 정렬 기능을 계속 유지할 수도 있습니다.

원래:

  1. HTML에서 컨테이너 머리글을 만들어 테이블 머리글 행과 테이블 본문을 배치하고, "마스크"div를 만들어 머리글을지나 스크롤 할 때 테이블 본문을 숨 깁니다.

  2. CSS에서 테이블 부분을 블록으로 변환

  3. Javascript에서 테이블 너비를 가져오고 마스크 너비와 일치하십시오 ... 페이지 내용의 높이를 얻으십시오 ... 스크롤 위치를 측정하십시오 ... 테이블 헤더 행 위치와 마스크 높이를 설정하기 위해 CSS를 조작하십시오

다음은 자바 스크립트와 jsFiddle DEMO입니다.

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— 데보라
소스
그러나 데모에서 테이블 헤더는 그대로 두지 않고 스크롤됩니다. (Chrome here)
— Sz.
Chrome에 표시되지 않습니다. 머리글에 빨간색으로 지시 된 노란색 강조 표시된 셀을 잘못 표시하지 않습니까? 머리글 셀은 맨 위에 있으며 회색 ( "Col 1", "Col 2"등)에서 회색입니다.
— Deborah
0

나를 위해 테이블 ​​CSS에서 너비를 제거 할 때까지 스크롤과 관련된 것은 실제로 작동하지 않았습니다. 원래 테이블 CSS는 다음과 같습니다.

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

너비를 제거하자마자 : 100 %; 모든 스크롤 기능이 작동하기 시작했습니다.

— 매튜 파크
소스
0

표준이 충분하지 않은 경우;) 본문이있는 테이블 바로 위에 헤더 만 포함하는 테이블을 배치 할 수 있습니다. 가로로 스크롤되지는 않지만 필요하지 않으면 ...

— M610
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.