[HTML]테이블 헤더 고정하는 방법

Web-Front/HTML

[HTML]테이블 헤더 고정하는 방법

usang0810 2020. 5. 18. 21:13

position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다.

이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다.

먼저 html코드의 큰 틀입니다.

<div class="tableWrapper">
    <table id="userListTable">
        <tr>
            <th>1번헤더</th>
            <th>2번헤더</th>
            <th>3번헤더</th>
            <th>4번헤더</th>
            <th>5번헤더</th>
        </tr>
    </table>
 </div>

그 다음은 핵심 css코드입니다.

div크기를 table의 크기보다 작게 만들어준 것은 가로스크롤 시에도 어떻게 동작되는지 보여주기위해서 저렇게 만든 것입니다.

#userListTable th에 position: sticky를 지정하고 꼭 top: 0으로 지정해줘야 헤더가 고정이 됩니다. top에 다른값을 주면 고정이 안됩니다. 그리고 배경색을 th에 지정해줘야 합니다. tr에 배경색을 지정해주면 tr은 고정되는것이 아니라 부자연스럽게 헤더가 고정이 되는것처럼 보입니다.

.tableWrapper {
    width: 400px;
    height: 300px;
    background-color: lightgreen;
    overflow: auto;
}

#userListTable {
    width: 500px;
    border: 0px;
    border-collapse: collapse;
}

#userListTable th {
    position: sticky;
    top: 0px;
    background-color: gray !important;
}

결과 화면입니다.

전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .tableWrapper {
            width: 400px;
            height: 300px;
            background-color: lightgreen;
            overflow: auto;
        }

        #userListTable {
            width: 500px;
            border: 0px;
            border-collapse: collapse;
        }

        #userListTable th,
        #userListTable td{
            width: 20%;
            border-right: 1px solid lightgray;
        }

        #userListTable th:last-child,
        #userListTable td:last-child{
            border-right: 0px !important;
        }

        #userListTable tr:first-child{
            background-color: gray !important;
            color: white !important;
            font-weight: bold !important;
        }

        #userListTable tr:nth-child(odd){
            background-color: blanchedalmond;
        }

        #userListTable th {
            position: sticky;
            top: 0px;
            background-color: gray !important;
        }
    </style>
</head>

<body>
    <div class="tableWrapper">
        <table id="userListTable">
            <tr style="cursor: default;">
                <th>1번헤더</th>
                <th>2번헤더</th>
                <th>3번헤더</th>
                <th>4번헤더</th>
                <th>5번헤더</th>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
        </table>
    </div>
</body>

</html>