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

 

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

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

 

그럴 땐 이렇게 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합시다~!

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    헐~~
    어떻게 아셨지?
    오늘 하루내내 끙끙거리던 문제가 단박에 해결되었네요...ㅋ~~
    반응형을 사용하다보니 가끔 놓치는 부분이 있더군요.
    오랫만에 폰에서 체크해보니 오른쪽이 허전해서리... 끙끙 삽질중이었습니다.
    <div style="overflow-x: auto;">
    이거 하나로 해결되었네요.
    감사합니다.
  • profile profile

    저도 오른쪽이 허전해서 끙끙거렸거든요ㅋㅋㅋ

    https://github.com/filamentgroup/tablesaw

    구글링해보니 이런 엄청난 라이브러리도 있더군요.

    (저한텐 너무 버거운 것 같아서 그냥 패스ㅎㅎ)

  • profile profile
    저도 걍 패쓰~~
    스와이프까지 해서 봐야할 만큼 중요한 자리가 아니라서...ㅎㅎㅎ
  • ?
    헐!
    이거 좋은데요.
    팁 감사합니다.
  • ? profile
    네, 간단하면서도 유용하더라구요 ^^/
  • profile

    좋으네요.. 저도 콘텐츠 가운데 테이블이나 아이프레임 크기 때문에 늘 고민이었는데.. 단번에 해결되는군요 ㅎ

    감사합니다.

  • ?
    정말 팁이네요.. 왜 이생각을 못했을까? ^^ 덕분에 고민덜었습니다.