[HTML/CSS] 테이블 헤더 고정 (ie에서는 안됨)

table 태그에서 스크롤을 해도 제목줄은 고정되고 바디 부분만 스크롤이 되는 방법에 대해 생각해봤다.

그래서 나름 고안한 방법은 일단 테이블을 div에 넣고 div에 height값을 주고 overflow:auto를 적용해준다.

그리고나서 thead 안에 있는 th or td에 position:sticky;top:0; 스타일을 주면 된다.

이게 가장 바람직한 방법인지 아닌지는 잘 모르겠지만 일단 생각나는건 이 방법 밖에 없어서 이런걸 구현해야할 일이 만약에 생긴다면 이 방법을 이용할 것 같다.

 

Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7	Col 8
Data 1,1	Data 1,2	Data 1,3	Data 1,4	Data 1,5	Data 1,6	Data 1,7	Data 1,8
Data 2,1	Data 2,2	Data 2,3	Data 2,4	Data 2,5	Data 2,6	Data 2,7	Data 2,8
Data 3,1	Data 3,2	Data 3,3	Data 3,4	Data 3,5	Data 3,6	Data 3,7	Data 3,8
Data 4,1	Data 4,2	Data 4,3	Data 4,4	Data 4,5	Data 4,6	Data 4,7	Data 4,8
Data 5,1	Data 5,2	Data 5,3	Data 5,4	Data 5,5	Data 5,6	Data 5,7	Data 5,8
Data 6,1	Data 6,2	Data 6,3	Data 6,4	Data 6,5	Data 6,6	Data 6,7	Data 6,8

참고로 MS 인터넷 익스플로러에서는 css position:sticky가 안되는 것 같다.

이제 인터넷 익스플로러 쓰는 사람이 사라지면 좋겠다.

 

약간 응용하면 헤더 말고 첫번째 열만 고정하는 방법도 있다.

첫번째 th, td에 position:sticky;left:0; 스타일을 주면 된다.

 

<style>
    .test-table { border:1px solid; border-collapse: collapse; white-space: nowrap; }
    .test-table td, .test-table th { border: 1px solid;width: 80px; }
    .test-table thead th { position:sticky; top: 0; background-color: lightcoral; }
    .table-container { width: 400px; height: 150px; overflow: auto; }
</style>
<div class='table-container'>
    <table class='test-table'>
        <thead>
            <tr>
                <th >Col 1</th>
                <th >Col 2</th>
                <th >Col 3</th>
                <th >Col 4</th>
                <th >Col 5</th>
                <th >Col 6</th>
                <th >Col 7</th>
                <th >Col 8</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1,1</td>
                <td>Data 1,2</td>
                <td>Data 1,3</td>
                <td>Data 1,4</td>
                <td>Data 1,5</td>
                <td>Data 1,6</td>
                <td>Data 1,7</td>
                <td>Data 1,8</td>
            </tr>
            <tr>
                <td>Data 2,1</td>
                <td>Data 2,2</td>
                <td>Data 2,3</td>
                <td>Data 2,4</td>
                <td>Data 2,5</td>
                <td>Data 2,6</td>
                <td>Data 2,7</td>
                <td>Data 2,8</td>
            </tr>
            <tr>
                <td>Data 3,1</td>
                <td>Data 3,2</td>
                <td>Data 3,3</td>
                <td>Data 3,4</td>
                <td>Data 3,5</td>
                <td>Data 3,6</td>
                <td>Data 3,7</td>
                <td>Data 3,8</td>
            </tr>
            <tr>
                <td>Data 4,1</td>
                <td>Data 4,2</td>
                <td>Data 4,3</td>
                <td>Data 4,4</td>
                <td>Data 4,5</td>
                <td>Data 4,6</td>
                <td>Data 4,7</td>
                <td>Data 4,8</td>
            </tr>
            <tr>
                <td>Data 5,1</td>
                <td>Data 5,2</td>
                <td>Data 5,3</td>
                <td>Data 5,4</td>
                <td>Data 5,5</td>
                <td>Data 5,6</td>
                <td>Data 5,7</td>
                <td>Data 5,8</td>
            </tr>
            <tr>
                <td>Data 6,1</td>
                <td>Data 6,2</td>
                <td>Data 6,3</td>
                <td>Data 6,4</td>
                <td>Data 6,5</td>
                <td>Data 6,6</td>
                <td>Data 6,7</td>
                <td>Data 6,8</td>
            </tr>
        </tbody>
    </table>
</div>