HTML 테이블 헤더 틀고정 - 가로 스크롤 고정 (HTML TABLE HEAD Fixed)

이전에 HTML 틀고정하기 관련 포스팅을 한 적이 있었습니다.

이전글 링크:테이블 틀고정 CSS로 깔끔하게 고정하기 - HTML TABLE HEAD Fixed

이번 포스팅을 하기 위해 이전에 만들었던 소스를 편집해서 직접 iframe으로 호출해서 확인 해보았습니다.

세로방향은 깔끔하게 고정이 된 것을 확인할 수 있었습니다.

<세로방향 스크롤>

하지만 가로 방향으로 스크롤 하면 어떨까요?

<가로방향 스크롤>

아랫테이블이 쇼를 하던 말던 홀로 고고하게 멈춰 있는 헤더를 볼 수 있었습니다.

실제 작업할 때도 이 때문에 당시 테이블 고정 작업을 다시 진행했었는데요. 

지금부터 어떻게 만들었는지 설명하겠습니다.

* * *   * * *

 가로·세로 방향 스크롤 할때 깔끔하게 테이블 틀 고정하기

깔끔하게 테이블 헤더의 틀고정을 하기 위해서는 iframe을 통한 호출이 필요합니다. 

1) 서브페이지 - 테이블 코드

두개의 테이블을 사용하는 방식은 앞서의 포스팅과 동일합니다. 

다만 기존 방식과 다르게 몇가지 내용이 삭제 또는 추가 되었습니다. 아래 내용을 참고하세요.

  -. overflow 사용 금지 : 테이블마다 각각 스크롤바가 생기면 따로 움직입니다. overflow는 iframe에서 한 번만 허용하면 됩니다.

  -. JQuery 호출 : 가로 스크롤 할 때 틀고정이 적용된 헤더도 움직이게 하려면 JQuery의 명령어를 사용하는게 깔끔합니다.

  -. Script 작성 : .틀고정이 적용된 헤더테이블(table1)의 left position값 변경. 

아래 코드는 스크롤이 움직일 때마다 left값이 같이 변하도록 작성된 코드입니다. 이를 추가해주면 됩니다.

 

    <script>

        $(window).scroll(function(){

            $(".table1").css("left",0-$(this).scrollLeft());

        })

    </script>

<style>
    * {margin:0; padding:0;}
    .wrap{width:600px; height: 200px; border:0px solid #00c;  color:rgb(0, 0, 0);
             position: relative;}    
    .table1, .table2{border:1px solid #000; width:100%; background:#E1E1E1;
                     text-align: center; font-size: 20px;}        
    .table1 th{background:#5c5c5c;}
    .table1 th,.table2 td{border:1px solid rgba(0, 0, 0, 0.596); height:20px;}    
    .wrap .table1{position: fixed; width:inherit; z-index: 100;}
    .table2{position: absolute; top:28px; width:inherit;}
    .tbwid_10{width:10%;}
    .tbwid_20{width:20%;}
    .tbwid_30{width:30%;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 
    <div class="wrap">        
            <table class="table1" cellpadding=0 cellspacing=0 border=0>                                
                <tr>
                    <th class="tbwid_20">구분</th>
                    <th class="tbwid_30">품목</th>
                    <th class="tbwid_10">수량</th>
                    <th class="tbwid_20">단가</th>
                    <th class="tbwid_20">구매금액</th>
                </tr>    
            </table>                            
            <table class="table2" cellpadding=0 cellspacing=0 border=0>                                
                <tr>
                    <td class="tbwid_20">게임</th>
                    <td class="tbwid_30">배틀그라운드</td>
                    <td class="tbwid_10">2</td>
                    <td class="tbwid_20">20,000</td>
                    <td class="tbwid_20">40,000</td>
                </tr>            
                <tr>
                    <td>게임</td>
                    <td>오버워치</td>
                    <td>1</td>
                    <td>32,000</td>
                    <td>32,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>스타크래프트2</td>
                    <td>2</td>
                    <td>28,000</td>
                    <td>56,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>드래곤퀘스트11</td>
                    <td>1</td>
                    <td>40,000</td>
                    <td>40,000</td>
                </tr>            
                <tr>
                    <td>게임</td>
                    <td>배틀그라운드</td>
                    <td>2</td>
                    <td>20,000</td>
                    <td>40,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>오버워치</td>
                    <td>1</td>
                    <td>32,000</td>
                    <td>32,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>스타크래프트2</td>
                    <td>2</td>
                    <td>28,000</td>
                    <td>56,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>드래곤퀘스트11</td>
                    <td>1</td>
                    <td>40,000</td>
                    <td>40,000</td>
                </tr>            
                <tr>
                    <td>게임</td>
                    <td>배틀그라운드</td>
                    <td>2</td>
                    <td>20,000</td>
                    <td>40,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>오버워치</td>
                    <td>1</td>
                    <td>32,000</td>
                    <td>32,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>스타크래프트2</td>
                    <td>2</td>
                    <td>28,000</td>
                    <td>56,000</td>
                </tr>
                <tr>
                    <td>게임</td>
                    <td>드래곤퀘스트11</td>
                    <td>1</td>
                    <td>40,000</td>
                    <td>40,000</td>
                </tr>                
            </table>
        </div>
    </div>
 
    <script>
            $(window).scroll(function(){
             $(".table1").css("left",0-$(this).scrollLeft());
            })
           </script>
 

2) 메인 페이지 - iframe 코드

실제로 실무에서는 더 복잡하겠지만 지금은 예시만을 보여주고자 iframe만을 넣은 페이지입니다.

틀고정이 제대로 동작하는지 확인하기 위해 ifame의 width 값과 height 값을 실제 테이블보다 작게 만들었습니다.

 <style>
     * {margin:0; padding:0;}
 </style>
 
    <iframe width="400" hight="200" frameborder="1" src="fixed_table.html">
 
    </iframe>
 

3) 정리. 테스트 이미지 & 첨부파일

앞서 올렸던 포스트는 몇몇 시행착오 상태에서 틀고정 하는 과정을 다뤘었는데 엉성하게 만들어진 부분이 많았습니다.

원래 이 포스팅을 바로 할 생각이었는데 방치하다가 이제서야 하게 되었습니다.

당시에 틀고정을 해달라는 요청사항에 시행착오를 참 많이 겪었던 기억이 나네요.

누군가에게 도움이 되기를 바랍니다.

<세로방향 스크롤>

<가로방향 스크롤>

앞서 작성한 코드를 토대로 만든 실제 HTML파일 입니다. 필요하신 분은 다운로드하세요.

fixed_table.zip