2017.06.13 20:49

반응형 CSS 테이블

조회 수 580 추천 수 0 댓글 0
이용 요금 안내
준성수기 : 7/1~7/14, 8/16~8/30
성 수 기 : 7/15~8/15
객실명 평형 입실인원
기준/최대
비수기 준성수기
7/1~7/14
8/16~8/30
성수기
7/15~8/15
101 20평
67m2
6인/10인 주중:20만
주말:23만
주중:23만
주말:26만
30만
102 10평
34m2
2인/4인 주중:7만
주말:9만
주중:9만
주말:14만
16만
103 12평
40m2
2인/5인 주중:8만
주말:10만
주중:10만
주말:15만
17만
104 12평
40m2
2인/5인 주중:8만
주말:10만
주중:10만
주말:15만
17만
105 15평
50m2
2인/6인 주중:10만
주말:12만
주중:12만
주말:16만
18만
- 기준인원 초과시 성인(10,000원), 아동유아(10,000원)이 추가됩니다.

상단 테이블과 같이 PC에서는 위와 같이 보이고(위의 테이블도 스마트폰에서는 아래와 같이 보임)

스마트폰에서는 아래와 같이 반응형으로 보이는 테이블 코드입니다.

csstable.jpg

<style rel="stylesheet" type="text/css">

.head { background-color: #327a81; color: white; font-size: 1.5em; padding: 1rem; text-align: center; text-transform: uppercase;}

.head1 { display: none; }

.price1 img { border-radius: 50%; height: 60px; width: 60px;}

.table-users { background-color: #91ced4; border: 1px solid #327a81; border-radius: 10px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); max-width: calc(100% - 2em); margin: 1em auto; overflow: hidden; width: 100%;}

.price1 { width: 100%;}

.price1 td, .price1 th { color: #2b686e; padding: 10px;}

.price1 td, .price1 th { text-align: center; vertical-align: middle;}

.price1 td:last-child { font-size: 0.95em; line-height: 1.4;}

.price1 th { background-color: #ceeaec; font-size:13px;}

.price1 tr:nth-child(2n) { background-color: white;}

.price1 tr:nth-child(2n+1) { background-color: #edf7f8;}

.bottom { background-color: #327a81; color: white; font-size: 12px; padding: 5px; text-align: left; text-transform: uppercase;}


@media screen and (max-width: 479px) {

.head1 { display: block; }

.head1 { background-color: #327a81; color: white; font-size: 1em; padding: 0 0 5px 70px; text-align: left; text-transform: uppercase;}

.price1, tr, td { display: block; }

.price1 td:first-child { position: absolute; top: 50%; -webkit-transform: translateY(-50%);   transform: translateY(-50%); }

.price1 td:not(:first-child) { clear: both; margin-left: 100px; padding: 4px 20px 4px 90px; position: relative; text-align: left; }

.price1 td:not(:first-child):before { color: #91ced4; content: ''; display: block; left: 0; position: absolute; }

.price1 td:last-child { text-align: left; width:300px;}

.price1 td:nth-child(2):before { content: '평형:'; }

.price1 td:nth-child(3):before { content: '입실인원:'; }

.price1 td:nth-child(4):before { content: '비수기:'; }

.price1 td:nth-child(5):before { content: '준성수기:'; }

.price1 td:nth-child(6):before { content: '성수기:'; }

.price1 tr { padding: 10px 0; position: relative; }

.price1 tr:first-child { display: none; }}

</style>


<div class="table-users">

<div class="head">이용 요금 안내</div>


<div class="head1">준성수기 : 7/1~7/14, 8/16~8/30<br />

성&nbsp;수&nbsp;기 : 7/15~8/15</div>


<table class="price1">

<tbody>

<tr>

<th>객실명</th>

<th>평형</th>

<th>입실인원<br />

기준/최대</th>

<th>비수기</th>

<th>준성수기<br />

7/1~7/14<br />

8/16~8/30</th>

<th>성수기<br />

7/15~8/15</th>

</tr>

<tr>

<td>101</td>

<td>20평<br />

67m<sup>2</sup></td>

<td>6인/10인</td>

<td>주중:20만<br />

주말:23만</td>

<td>주중:23만<br />

주말:26만</td>

<td>30만</td>

</tr>

<tr>

<td>102</td>

<td>10평<br />

34m<sup>2</sup></td>

<td>2인/4인</td>

<td>주중:7만<br />

주말:9만</td>

<td>주중:9만<br />

주말:14만</td>

<td>16만</td>

</tr>

<tr>

<td>103</td>

<td>12평<br />

40m<sup>2</sup></td>

<td>2인/5인</td>

<td>주중:8만<br />

주말:10만</td>

<td>주중:10만<br />

주말:15만</td>

<td>17만</td>

</tr>

<tr>

<td>104</td>

<td>12평<br />

40m<sup>2</sup></td>

<td>2인/5인</td>

<td>주중:8만<br />

주말:10만</td>

<td>주중:10만<br />

주말:15만</td>

<td>17만</td>

</tr>

<tr>

<td>105</td>

<td>15평<br />

50m<sup>2</sup></td>

<td>2인/6인</td>

<td>주중:10만<br />

주말:12만</td>

<td>주중:12만<br />

주말:16만</td>

<td>18만</td>

</tr>

</tbody>

</table>


<div class="bottom">- 기준인원 초과시 성인(10,000원), 아동유아(10,000원)이 추가됩니다.</div>

</div>


    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 117
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 231
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 218
54 DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 207
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 112
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 181
51 커서(cursor) 모양 정리 file 팔공산 2018.07.19 80
50 webkit-animation 적용 방법 file 팔공산 2018.01.31 189
49 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 311
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 172
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 207
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1043
» 반응형 CSS 테이블 file 팔공산 2017.06.13 580
44 실시간 환율조회 html file 팔공산 2017.04.18 354
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 4822
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 898
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 355
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1329
39 CSS3 border-radius 이해하기 file 팔공산 2016.04.07 259
38 IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 11725
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...