[jQuery] jQuery CSS 반응형 테이블

26 Dec 2023

jQuery

반응형 웹 디자인은 사용자의 디바이스에 상관없이 웹 사이트가 잘 표시되도록 하는 중요한 요소입니다. 특히, 테이블은 다양한 화면 크기에 대응하기 어려운 요소 중 하나입니다. jQuery를 사용하여 CSS 기반의 반응형 테이블을 만들어 보겠습니다.

HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CSS 반응형 테이블</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>이메일</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>홍길동</td>
                    <td>30</td>
                    <td>hong@example.com</td>
                </tr>
                <!-- 나머지 데이터 -->
            </tbody>
        </table>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS 스타일

/* style.css */

/* 테이블 래퍼 및 테이블 스타일링 */
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid #000;
}
th, td {
  padding: 8px;
  text-align: left;
}

jQuery를 사용한 반응형 테이블

// script.js

$(document).ready(function() {
    // 윈도우 크기 변경시 테이블 스타일 조정
    $(window).on('resize', function() {
        if ($(window).width() < 768) {
            $('.table-wrapper').css('overflow-x', 'scroll');
        } else {
            $('.table-wrapper').css('overflow-x', 'auto');
        }
    });
});

이제 HTML, CSS, 그리고 jQuery를 사용하여 반응형 테이블이 구현되었습니다. 윈도우 크기가 변경될 때 테이블이 적절하게 반응하여 스크롤이 나타나거나 사라지게 됩니다.

HTML 구조

CSS 스타일

jQuery를 사용한 반응형 테이블

참고 자료