-
[HTML & CSS] 열(Column)만 고정처리 예제ETC 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 }} 반응형'ETC' 카테고리의 다른 글
[Azure Data Studio] 실행 계획 버튼 보이게 하기 (0) 2022.05.15 [Gitpod] 무료 브라우저 기반 VSCode 개발환경 GitPod 소개 (0) 2022.02.05 [HTML & CSS] 말줄임표 예제 (0) 2022.01.22 [VSCode] 특정 문자를 찾아 개행하는 미세먼지팁 (1) 2021.12.26 [VSCode] remote-ssh 로 연결 안 될 때 확인할 사항 (0) 2021.11.21