[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

Posted at 2019. 6. 18. 14:47 | Posted in JavaScript & jQuery/jQuery
반응형


※ 참고


해당 예제는 jQuery Mobile의 HTML TABLE을 반응형으로 바꿔 모바일 화면에 맞게 출력할 수 도 있게 해주는 예제이다.

그렇기에 해당 예제는 jQuery.mobile.css 파일이 반드시 필요하기에. 사전에 제작중인 사이트에서 사용할 경우 CSS의 충돌은 염두해 두어야 할것이다.






■ 모바일 화면 크기에 맞는 테이블 레이아웃 변경





실제 사이트를 제작하고 운영하는 단계에서


요즘 반드시 고려하게 되는것이,


디바이스 화면에 맞추어 화면을 변화시키는 것이고,


그중 가장 귀찮게 하는것이 바로 HTML TABLE일 것이다.


컴퓨터와 모바일 디바이스에서의 보여주어야 하는 정보를 어떻게 처리해야 할지 상당히 귀찮고.


피곤한데, 이 고민을 jQuery Mobile을 사용하면 어느정도 덜어 낼 수 있다.




# HTML 소스 코드

 table_reaction.html

<html>

<head>

<title>:: 빅데이터 분석결과 ::</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>

<link rel="stylesheet" href="./custom_table.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

</script>

</head>

<body>

<div data-role="content">

<h2>걸그룹 개인 브랜드 2019년 6월 빅데이터 분석결과</h2>

<table data-role="table" class="ui-responsive">

<thead>

<tr>

<th>순위</th><th>그룹명</th><th>이름</th><th>참여지수</th>

<th>미디어지수</th><th>소통지수</th><th>커뮤니티지수</th><th>총합</th>

</tr>

</thead>

<tbody>

<tr>

<td>2</td><td>레드벨벳</td><td>아이린</td><td>186,886</td>

<td>700,986</td><td>655,633</td><td>295,489</td><td>1,838,995</td>

</tr>

<tr>

<td>3</td><td>블랙핑크</td><td>지수</td><td>296,098</td>

<td>336,852</td><td>699,946</td><td>488,412</td><td>1,821,308</td>

</tr>

<tr>

<td>8</td><td>트와이스</td><td>나연</td><td>184,853</td>

<td>289,526</td><td>530,781</td><td>222,033</td><td>1,248,732</td>

</tr>

<tr>

<td>29</td><td>러블리즈</td><td>정예인</td><td>95,033</td>

<td>400,325</td><td>99,946</td><td>318,187</td><td>913,491</td>

</tr>

<tr>

<td>32</td><td>EXID</td><td>하니</td><td>290,677</td>

<td>169,911</td><td>303,396</td><td>135,080</td><td>899,063</td>

</tr>

<tr>

<td>36</td><td>트와이스</td><td>사나</td><td>179,119</td>

<td>182,508</td><td>255,687</td><td>242,732</td><td>860,046</td>

</tr>

<tr>

<td>41</td><td>레드벨벳</td><td>웬디</td><td>115,885</td>

<td>151,444</td><td>317,304</td><td>218,490</td><td>803,124</td>

</tr>

<tr>

<td>52</td><td>오마이걸</td><td>유아</td><td>283,587</td>

<td>184,294</td><td>137,143</td><td>141,610</td><td>746,634</td>

</tr>

<tr>

<td>53</td><td>모모랜드</td><td>연우</td><td>462,914</td>

<td>180,397</td><td>274,933</td><td>125,720</td><td>717,525</td>

</tr>

<tr>

<td>90</td><td>트와이스</td><td>미나</td><td>107,567</td>

<td>101,775</td><td>108,571</td><td>165,970</td><td>483,883</td>

</tr>

<tr>

<td>96</td><td>우주소녀</td><td>성소</td><td>252,931</td>

<td>57,348</td><td>93,477</td><td>50,066</td><td>453,722</td>

</tr>

<tr>

<td>98</td><td>다이아</td><td>정채연</td><td>211,648</td>

<td>108,572</td><td>81,186</td><td>46,940</td><td>448,345</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>




TABLE에 data-role="table" 속성을 추가하면


thead의 제목 필드값이 tbody의 td 값들 앞에 붙여지게 되지만.


그것은 jQuery.mobile.css 에서 노출을 막아주고 있기에


화면 사이즈의 변화에 따라서만 노출되게 된다.




# CSS 디자인

 custom_table.css

/* 화면 사이즈 조절 */

@media screen and (min-width:36em) {

/* 화면의 사이즈가 560px 이상일 경우 table의 텍스트를 가운데 정렬 한다.*/

.ui-responsive th, .ui-responsive td {

text-align:center;

}

}


/* 테이블 디자인 */

table {

width:100%;

text-align:center;

border-collapse:collapse;

}


th {

background:linear-gradient(#333333 0%, #444444 100%);

color:#FFFFFF;

font-weight:bold;

height:60px;

font-size:20px;

}

td {

height:40px;

}


/* 홀수행 백그루안드 색상 */

tr:nth-child(even) td {

background:#EEEEEE;

}


/* 짝수행 백그루안드 색상 */

tr:nth-child(odd) td {

background:#FDFDFD;

}




코드의 준비가 끝났다면


브라우저를 통해 해당 HTML 코드를 불러와 보자.




# 출력결과01 - 풀 사이즈






처음 풀 사이즈로 본 화면은 평소 컴퓨터를 할때 자주 접하게 되는


HTML TABLE과 다른 부분을 찾아볼 수 없다.


그럼 이제 해당 화면이의 가로 넓이 사이즈를 줄여 나가 보자.






# 출력결과 - 모바일 사이즈





그럼 위와같이 모바일 화면에 맞게 새로 정의된 TABLE의 내용을 확인 할 수 있다.








반응형
//