Nice programing

고정 헤더가있는 CSS 전용 스크롤 가능 테이블

nicepro 2020. 12. 5. 10:37
반응형

고정 헤더가있는 CSS 전용 스크롤 가능 테이블

마이너 jQuery 및 CSS를 사용하여 머리글 / 바닥 글이 고정 된 스크롤 가능한 테이블을 만들 수있는 솔루션이 있지만 브라우저 간 호환되는 CSS 전용 솔루션을 만드는 방법을 찾고 있습니다.

명확하게하기 위해, 내가 추구하고 어떤 것은 사용은 단지table 태그 (그리고 하위 태그, 유효있어 colgroup, col, thead, tbody, tfoot, tr, th, td)하지만, 다음과 같은 조건을 충족 CSS 규칙의 집합을 채택 :

  1. 머리글 / 바닥 글 / 콘텐츠 행 사이의 열 정렬을 유지해야합니다.
  2. 콘텐츠가 세로로 스크롤되는 동안 머리글 / 바닥 글은 고정 된 상태로 유지되어야합니다.
  3. 기능을 제공하기 위해 jQuery 또는 기타 JavaScript가 필요하지 않아야합니다.
  4. 위에 제공된 태그 만 사용해야합니다.

이 코드 예제 : http://jsfiddle.net/TroyAlford/SNKfd/ 는 현재 접근 방식을 보여줍니다. 대부분의 JS는 임의의 값으로 테이블을 채우는 것이지만 마지막 부분은 왼쪽 / 오른쪽 스크롤 가능성을 구동하는 것입니다.

$tbody.bind('scroll', function(ev) {
    var $css = { 'left': -ev.target.scrollLeft };
    $thead.css($css);
    $tfoot.css($css);
});

참고 : 제공된 예제는 IE에서 제대로 렌더링되지 않으며 가로 스크롤을 제공하려면 jQuery가 필요합니다. 어쨌든 가로 스크롤은 신경 쓰지 않으므로 솔루션이 그렇게하지 않아도 괜찮습니다.

이 답변은 완전히 지원되지 않는 자리 표시 자로 사용되며 position: sticky시간이 지남에 따라 업데이트됩니다. 현재 프로덕션 환경에서는 기본 구현을 사용하지 않는 것이 좋습니다.

현재 지원은 https://caniuse.com/#feat=css-sticky를 참조하십시오.

사용 position: sticky

다른 대답은 position: sticky. W3C에서 설명한대로 :

고정 배치 된 상자는 상대적으로 배치 된 상자와 유사하게 배치되지만, 오프셋은 스크롤 상자가있는 가장 가까운 조상을 참조하여 계산되거나, 조상이 스크롤 상자를 가지고 있지 않은 경우 뷰포트를 참조하여 계산됩니다.

이것은 상대 정적 헤더의 동작을 정확하게 설명했습니다. W3C에 따라 지원되어야하므로이를 <thead>첫 번째 <tr>HTML 태그 또는 첫 번째 HTML 태그에 쉽게 할당 할 수 있습니다 . 그러나 Chrome , IE 및 Edge 모두 이러한 태그에 고정 위치 속성을 할당하는 데 문제가 있습니다. 현재이 문제를 해결하는 데 우선 순위가없는 것 같습니다.

테이블 요소에서 작동하는 것처럼 보이는 것은 고정 속성을 테이블 셀에 할당하는 것입니다. 이 경우 <th>세포.

테이블은 사용자가 할당 한 정적 크기를 존중하는 블록 요소가 아니기 때문에 래퍼 요소 를 사용하여 스크롤 오버플로를 정의 하는 것이 가장 좋습니다 .

코드

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}
<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </table>
</div>

이 예제에서는 간단한 <div>래퍼를 사용하여 정적 높이로 수행되는 스크롤 오버플로를 정의합니다 150px. 물론 이것은 모든 크기가 될 수 있습니다. 이제 스크롤 상자가 정의되었으므로 스티키 <th>요소는 "스크롤 상자가있는 가장 가까운 조상"(div-wrapper)에 코어 응답합니다.

(A)의 사용 position: sticky polyfill

지원되지 않는 장치는 코드를 통해 동작을 구현하는 polyfill을 사용할 수 있습니다. 예를 들어 stickybits 는 브라우저가 구현 한 것과 동일한 동작을 닮았습니다 position: sticky.

polyfill을 사용한 예 : http://jsfiddle.net/7UZA4/6957/

놀랍게도 flexbox를 사용하는 솔루션이 아직 게시되지 않았습니다.

다음 은 스크롤바 패딩이 약간 있어도 정렬을 유지하기 위해 display: flex사용하는 솔루션 과 :after( Luggage 덕분에 ) 기본 사용입니다 tbody. 이것은 Chrome 45, Firefox 39 및 MS Edge 에서 확인되었습니다 . IE11에서 작동하도록 접두사가 붙은 속성으로 수정할 수 있으며, CSS 해킹 및 2012 flexbox 구문을 사용하여 IE10에서 작동 할 수 있습니다 .

테이블 너비는 수정할 수 있습니다. 이것은 100%너비 에서도 작동합니다 .

유일한주의 사항은 모든 테이블 셀의 너비가 동일해야한다는 것입니다. 아래는 명확하게 고안된 예제이지만 셀 내용이 다를 때 잘 작동합니다 (테이블 셀은 모두 동일한 너비와 단어 줄 바꿈을 사용하여 내용에 관계없이 flexbox가 동일한 너비를 유지하도록합니다). 다음 은 셀 내용이 다른 예입니다.

.scroll스크롤이 가능한 테이블에 클래스를 적용하고 다음이 있는지 확인하십시오 thead.

.scroll {
  border: 0;
  border-collapse: collapse;
}

.scroll tr {
  display: flex;
}

.scroll td {
  padding: 3px;
  flex: 1 auto;
  border: 1px solid #aaa;
  width: 1px;
  word-wrap: break-word;
}

.scroll thead tr:after {
  content: '';
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}

.scroll thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.scroll tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}
<table class="scroll" width="400px">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

내가 아는 한 CSS만으로 이것을 달성하는 표준 방법은 없지만 있어야한다고 생각합니다. Mozilla 브라우저는 스크롤 본문이있는 고정 헤더를 지원하는 데 사용되었지만 지난 몇 년 동안 제거되었습니다.

이 게시물을 찾는 것을 포함하여 이것을 약간 조사한 후 친구 가 나를 위해이 솔루션 을 개발 했습니다 . Javascript를 사용하지만 미리 준비된 라이브러리는 없으며 HTML 마크 업에 대한 유일한 요구 사항은 테이블에 ID 이름이 있다는 것입니다. 그런 다음 window.onload에서 ID, 높이 및 너비를 제공하는 각 테이블에 대해 하나의 Javascript 함수를 호출합니다. 브라우저에서 Javascript가 비활성화 된 경우 전체 테이블이 원래 마크 업에 따라 표시됩니다. 자바 스크립트가 활성화되면 테이블이 지정된 높이와 너비에 맞춰지고 tbody가 스크롤되며 thead와 tfoot이 존재하면 상단과 하단에 고정됩니다.

@Purag의 답변에서 영감을 얻은 또 다른 flexbox 솔루션이 있습니다.

/* basic settings */
table { display: flex; flex-direction: column; width: 200px; }
tr { display: flex; }
th:nth-child(1), td:nth-child(1) { flex-basis: 35%; }
th:nth-child(2), td:nth-child(2) { flex-basis: 65%; }
thead, tbody { overflow-y: scroll; }
tbody { height: 100px; }

/* color settings*/
table, th, td { border: 1px solid black; }
tr:nth-child(odd) { background: #EEE; }
tr:nth-child(even) { background: #AAA; }
thead tr:first-child { background: #333; }
th:first-child, td:first-child { background: rgba(200,200,0,0.7); }
th:last-child, td:last-child { background: rgba(255,200,0,0.7); }
<table>
    <thead>
      <tr>
        <th>a
        <th>bbbb
    <tbody>
      <tr>
        <td>fooo vsync dynamic
        <td>bar
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
  </table>

이 코드를 사용하여 쉽게 달성했습니다.

따라서 다음과 같은 구조가 있습니다.

<table>
<thead><tr></tr></thead>
<tbody><tr></tr></tbody>
</table>

다음으로 thead 스타일을 지정하십시오.

<style>
thead{ 
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0px;
}
</style>

고려해야 할 세 가지 사항 :

첫째,이 속성은 새로운 것입니다. Webkit 기반 브라우저의 베타 빌드를 제외하고는 전혀 지원되지 않습니다. 그래서 조심하십시오. 다시 말하지만, 사용자가 고정 헤더의 혜택을 누리고 싶다면 자바 스크립트 구현을 사용하세요.

둘째, 사용하는 경우 공급 업체 접두사를 통합해야합니다. 아마도 위치 : 스티키는 언젠가는 작동 할 것입니다. 그러나 지금은 position : -webkit-sticky를 사용해야합니다 (그리고 다른 것;이 게시물에서 더 높은 css 블록을 확인하십시오).

셋째, 현재 위치 지정 기본값이 없으므로 최소한 top : 0을 포함해야합니다. position : -webkit-sticky와 동일한 CSS 선언에서. 그렇지 않으면 화면 밖으로 스크롤됩니다.

표 셀에 고정 너비를 지정하고 머리글에 고정 높이를 지정하는 position: fixed옵션 이있는 경우 다음 옵션을 사용할 수 있습니다.

http://jsfiddle.net/thundercracker/ZxPeh/23/

그냥 iframe. iframe스크롤바 를 제공하여 수평 스크롤을 할 수도 있습니다 (제 생각에).

2015 년 수정

표 셀의 너비 (백분율)를 미리 정의하여 살 수 있다면 다음은 좀 더 우아한 (CSS 전용) 솔루션입니다.

http://jsfiddle.net/7UBMD/77/

CSS에서만 :

CSS :

tr {
  width: 100%;
  display: inline-table;
  table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

이 스레드는 한동안 비활성 상태 였지만이 주제에 관심이 있었고 이제 일부 CSS3 선택기를 사용하면이 작업이 더 쉬워졌습니다 (CSS만으로 꽤 가능).

이 솔루션은 테이블 컨테이너의 최대 높이에 의존합니다. 그러나 :first-child선택기를 사용할 수있는 한 지원됩니다 .

여기 바이올린 .

이 답변을 개선 할 수있는 사람이 있으면 수행하십시오! 곧 상용 앱에서이 솔루션을 사용할 계획입니다!

HTML

<div id="con">
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>        
    <tbody>             
    </tbody>
</table>
</div>

CSS

#con{
    max-height:300px;
    overflow-y:auto;
}
thead tr:first-child {
    background-color:#00f;
    color:#fff;
    position:absolute;
}
tbody tr:first-child td{
    padding-top:28px;
}

나는 똑같은 문제가 있었고 2 일 동안 조사한 후 Ksesocss 에서이 솔루션을 찾았으며 나에게 적합하고 아마도 당신에게도 좋습니다. 고정 헤더 및 동적 너비를 허용하고 CSS 만 사용합니다. 유일한 문제는 소스가 스페인어로되어 있지만 거기에서 html 및 css 코드를 찾을 수 있다는 것입니다.

이것은 링크입니다 :

http://ksesocss.blogspot.com/2014/10/responsive-table-encabezado-fijo-scroll.html

이게 도움이 되길 바란다

언급 된 모든 솔루션이 작동하지 않는 경우 (나에게있어)이 답변에서 설명한대로 두 테이블 솔루션을 시도하십시오.

https://stackoverflow.com/a/47722456/6488361

최근에 이것이 필요했기 때문에 3 개의 테이블을 사용하지만 JavaScript가 필요없는 솔루션을 공유 할 것입니다.

표 1 (상위)에는 두 개의 행이 있습니다. 첫 번째 행에는 열 머리글에 대한 테이블 2 (하위 1)가 있습니다. 두 번째 행에는 스크롤 콘텐츠에 대한 표 3 (하위 2)이 있습니다.

이주의해야 childTbl해야 25px댄 짧은 parentTbl스크롤러가 제대로 나타날 때까지.

이것이 내가 아이디어를 얻은 출처입니다. 사용되지 않는 태그와 인라인 CSS없이 HTML5 친화적으로 만들었습니다.

.parentTbl table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
  width: 690px;
}
.childTbl table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #d7d7d7;
  width: 665px;
}
.childTbl th,
.childTbl td {
  border: 1px solid #d7d7d7;
}
.scrollData {
  width: 690;
  height: 150px;
  overflow-x: hidden;
}
<div class="parentTbl">
  <table>
    <tr>
      <td>
        <div class="childTbl">
          <table class="childTbl">
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
              <th>Header 5</th>
              <th>Header 6</th>
            </tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="scrollData childTbl">
          <table>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
            <tr>
              <td>Table Data 1</td>
              <td>Table Data 2</td>
              <td>Table Data 3</td>
              <td>Table Data 4</td>
              <td>Table Data 5</td>
              <td>Table Data 6</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>

이것은 다른 브라우저에서 신뢰할 수 있으며, 단점은 테이블 너비를 하드 코딩해야한다는 것입니다.

나는 최근에 이것을 알아 내려고 노력하고 있었고 브라우저 (Chrome 51)에서 완벽하게 작동하고 동적 열 너비를 지원 하는 좋은 솔루션을 찾았습니다 . 나는 독립적으로 내 대답을 도출 한 후에 웹의 다른 곳에서 설명한 유사한 기술을 발견했다고 언급해야합니다 ...

트릭은 서로 위에 위치한 두 개의 동일한 테이블을 사용하는 것입니다. 하단 테이블이 표시되고 상단 테이블은 헤더에 대해 보이지 않습니다. 상단 테이블도 pointer-events: nonetbody에 설정되어 있으므로 마우스 상호 작용이 테이블 아래에 충돌합니다. 이렇게하면 아래쪽 테이블이 위쪽 테이블의 머리글 아래로 스크롤됩니다.

모든 항목을 적절하게 레이아웃하고 크기를 조정하려면 (예 : 사용자가 화면 너비를 조정할 때) 두 테이블 모두 동일한 스크롤바 동작을 가져야합니다. 그러나 상단 테이블의 스크롤 막대는으로 인해 무시되며 다음을 사용하여 pointer-events: none보이지 않게 만들 수 있습니다.

<style>
    .hiddenScrollbar::-webkit-scrollbar {
        background-color: transparent;
    }
</style>

다음은 완전한 코드입니다.

<html>

<head>
  <style>
    td {
      border: 1px solid black; 
      white-space: nowrap;
    }
    th {
      background-color: gray;
      border: 1px solid black;
      white-space: nowrap;
    }
    .hiddenScrollbar::-webkit-scrollbar {
      background-color: transparent;
    }
  </style>
</head>

<body>
  Table test. Use mouse wheel to scroll or scroll to the right to see vertical scroll bar. You can also remove the outermost div if you don't want a horizontal scroll bar.
  <br/>
  <div style="display: inline-block; height: 10em; width: 15em; overflow-x: scroll; overflow-y: hidden">
    <div style="position: relative;">
      <div style="display: inline-block; position: absolute; left: 0px; top: 0px; height: 10em; overflow-y: scroll">
        <table style="border-collapse: collapse;">
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Another Column</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Data 1</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 2</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 3</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 4</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 5</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 6</td>
              <td>12340921375021342354235 very long...</td>
            </tr>
            <tr>
              <td>Data 7</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 8</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 9</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 10</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 11</td>
              <td>123409213750213</td>
            </tr>
            <tr>
              <td>Data 12</td>
              <td>123409213750213</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="hiddenScrollbar" style="display: inline-block; pointer-events: none; position: relative; left: 0px; top: 0px; height: 10em; overflow-y: scroll">
        <table style="border-collapse: collapse;">
          <thead style="pointer-events: auto">
            <tr>
              <th>Column 1</th>
              <th>Another Column</th>
            </tr>
          </thead>
          <tbody style="visibility: hidden">
            <tr>
              <tr>
                <td>Data 1</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 2</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 3</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 4</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 5</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 6</td>
                <td>12340921375021342354235 very long...</td>
              </tr>
              <tr>
                <td>Data 7</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 8</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 9</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 10</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 11</td>
                <td>123409213750213</td>
              </tr>
              <tr>
                <td>Data 12</td>
                <td>123409213750213</td>
              </tr>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div><br/>
Stuff after table.
</body>

</html>

Caveats: More work is required to prove this works in other browsers. Also I was rather liberal in mixing inline and stylesheet styles. However I believe the general concept is the best way of doing this since if the target browser supports it. The only functionality/display issues are that if you want a horizontal scroll bar, the vertical scroll bar can get scrolled out of view (as shown in the snippet). You can still scroll with the mouse wheel though. Additionally you can't have a transparent background on the header (otherwise the underneath table would show through). Finally you need a way to generate two identical tables. Personally I am using react.js and it is easy to do it with react, but php or other server-side generation or javascript will also work.

Another implementation but without any overflow on tbody and dynamic columns. Requires JavaScript though. A container div is used to house the column headings. When the table is scrolled past the view port, a fixed header appears at the top. If table is scrolled horizontally, the fixed header scrolls as well.

Column headings are created using span elements with display: inline-block and a negative margin is used to scroll header horizontally. Also optimized using RequestAnimationFrame to avoid any jank.

function rAF(scrollLeft) {
  var offsetLeft = 0 - scrollLeft;
  $('.hdr__inner span:first-child').css('margin-left', offsetLeft);
}

https://codepen.io/lloydleo/pen/NRpqEE

참고URL : https://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers

반응형

'Nice programing' 카테고리의 다른 글

git : 두 가지 병합 : 어떤 방향?  (0) 2020.12.05
jQuery의 작은 따옴표 또는 큰 따옴표  (0) 2020.12.05
C # 클래스 이름에는 어떤 문자가 허용됩니까?  (0) 2020.12.04
Google Web Toolkit (GWT)의 여러 페이지 자습서  (0) 2020.12.04
InputStream의 크기 결정  (0) 2020.12.04

'Nice programing'의 다른글

  • 현재글고정 헤더가있는 CSS 전용 스크롤 가능 테이블

관련글

댓글

티스토리툴바