티스토리 뷰

WEB/css

체크박스 포함 반응형 테이블

silverline79 2026. 2. 5. 22:17

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>체크박스 포함 반응형 테이블</title>
    <style>
        body { font-family: 'Pretendard', sans-serif; padding: 20px; background-color: #f9f9f9; }

        .table-container {
            width: 100%;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; border-bottom: 1px solid #eee; text-align: center; }
        th { background-color: #f4f6f8; font-weight: 600; color: #333; }

        /* 체크박스 정렬을 위한 스타일 */
        .chk-cell { /*width: 50px*/; }
        input[type="checkbox"] { cursor: pointer; width: 18px; height: 18px; }

        /* 반응형 스타일 (모바일) */
        @media screen and (max-width: 768px) {
            thead { display: none; } /* 헤더 숨김 */
            
            tr { display: block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; }
            
            td {
                display: flex; /* 가로 정렬을 위해 flex 사용 */
                justify-content: space-between;
                align-items: center;
                text-align: right;
                border-bottom: 1px solid #eee;
                padding: 10px 15px;
            }

            td:last-child { border-bottom: none; }

            /* 모바일에서 레이블 표시 */
            td::before {
                content: attr(data-label);
                font-weight: bold;
                color: #555;
                text-align: left;
            }

            /* 체크박스 칸은 예외적으로 제목 없이 중앙 정렬하거나 강조 */
            td.chk-cell {
                background-color: #f9f9f9;
                justify-content: center;
            }
            td.chk-cell::before { content: "선택"; margin-right: auto; }
        }
    </style>
</head>
<body>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th class="chk-cell">
                        <input type="checkbox" id="checkAll" aria-label="전체 선택">
                    </th>
                    <th>이름</th>
                    <th>직업</th>
                    <th>이메일</th>
                    <th>등록일</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="chk-cell" data-label="선택">
                        <input type="checkbox" class="chk" aria-label="제미니 선택">
                    </td>
                    <td data-label="이름">제미니</td>
                    <td data-label="직업">AI 어시스턴트</td>
                    <td data-label="이메일">gemini@example.com</td>
                    <td data-label="등록일">2026-02-05</td>
                </tr>
                <tr>
                    <td class="chk-cell" data-label="선택">
                        <input type="checkbox" class="chk" aria-label="홍길동 선택">
                    </td>
                    <td data-label="이름">홍길동</td>
                    <td data-label="직업">개발자</td>
                    <td data-label="이메일">hong@example.com</td>
                    <td data-label="등록일">2026-01-20</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 전체 선택 기능 스크립트
        const checkAll = document.getElementById('checkAll');
        const checkboxes = document.querySelectorAll('.chk');

        checkAll.addEventListener('change', (e) => {
            checkboxes.forEach(chk => {
                chk.checked = e.target.checked;
            });
        });
    </script>

</body>
</html>

체크박스 포함 반응형 테이블.html
0.00MB

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > css' 카테고리의 다른 글

웹접근성 준수 복합 테이블  (0) 2026.02.05
복합 구조 상세 페이지  (0) 2026.02.05
Flexbox 3열 반응형 테이블  (0) 2026.02.05
UL/LI 3열 반응형 테이블  (0) 2026.02.05
table 테그를 반응형으로 만들기  (0) 2026.02.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함