ETC

[HTML & CSS] 열(Column)만 고정처리 예제

ddochea 2022. 1. 22. 14:36
반응형

테이블 태그에서 첫번째 열 고정처리 예제

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        table {
            position: relative; /* 이번 예제에선 없어도 되긴하지만, 구성에 따라 필요할 수 있음. */
        }
        th,
        td {
            width: 300px;
            height: 50px;
            min-width: 300px;
            /* 스크롤 생성을 위해 인위적으로 키운 크기 */
            min-height: 50px;
            text-align: center;
        }

        th:first-child,
        td:first-child {
            position: sticky;
            background-color: white; /* 바탕을 불투명하게 처리해야 뒤로 숨은 다른 열들을 잘 가릴 수 있다 */
            left: 0;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>이름</th>
                    <th v-for="j in 10">
                        {{ j }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="i in 20">
                    <td>OOO {{ i }}</td>
                    <td v-for="j in 10">
                        <input type="checkbox" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
</body>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>
</html>

 

결과

Page Title
이름 {{ j }}
OOO {{ i }}
반응형
저작자표시 비영리 동일조건 (새창열림)