조회 수 168 추천 수 0 댓글 0

윤삼님이 Xetown에 올려주신 내용을 가져왔습니다.

https://xetown.com/tips/1182610

 

간혹 보면 테이블 가로 사이즈가 화면사이즈보다 넓어서 화면 구성이 원활하지 않을 때가 있습니다.

 

저도 게시판 스킨에 확장변수 다중검색 애드온을 얹어서 아카이브 사이트를 납품한 적이 있는데, 사용자정의 확장변수가 워낙 많다보니 테이블이 화면 바깥으로 나가서 '반응형 페이지'라는 취지가 무색했던 경험이 있습니다.

어디 목록 페이지에서만 그렇겠습니까? 게시물 본문에서도 테이블을 넣어야 할 때가 있잖아요?

 

그럴 땐 이렇게 table 태그를 div 태그로 wrap해보세요.

<div style="overflow-x: auto;">

    <table ....>

        ....

    </table>

</div>

 

이렇게 하면 페이지의 윈도우 가로사이즈 반응성을 유지하면서 동시에 모바일에선 스와이프로 화면에 가려진 내용을 볼 수 있게 됩니다.

 

또한 css에서 @mdia screen and (max-width: 767px) 같은 미디어 쿼리를 이용하면 더욱 더 동적인 반응성을 경험할 수 있을 겁니다.

그리고 이 경우엔 스와이프 동작을 유도하는 아이콘이나 gif 이미지를 넣어볼 수도 있을 거구요.

여기 사이트의 table 태그가 그렇게 돼 있더라구요 :)

http://www.mohw.go.kr/react/policy/index.jsp?PAR_MENU_ID=06&MENU_ID=06370111&PAGE=11&topTitle=

 

오늘도 즐겁고 유익한 RXE합시다~!

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

Html Tips

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

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