라이믹스질답게시판

모바일에서 표 등이 잘림

? Lv1
미이풍
Extra Form
PHP PHP 8.2
CMS Rhymix 2.1

왠만하면 스스로 해결해 보려고 여기저기 검색을 해봐도 모르겠네요.. 게시판에 표를 넣을 경우 모바일에서는 표가 잘립니다. 좌우스크롤로도 안되고 확대/축소로도 안됩니다. (게시판이 아니라 문서 페이지, 위젯페이지에 내용추가로 직접 넣은 표 등도 잘림)

 

일단 제가 알아낸건 

 

https://m.blog.naver.com/seri313/222155907849

https://log.designichthus.com/13

 

등을 참고해서 css를 건드리면 된다는 것 까지는 알아냈는데.. 이 CSS가 라이믹스 전체에 적용된 레이아웃의 CSS인지 게시판의 디자인 영역인지 모르겠습니다.

 

개발에 큰 지식이 없이 홈페이지를 구축하려다 보니 어려움이.. ㅠㅠ 도와주세요! 예전 XE 시절보다 뭔가 더 어려워진 느낌이라 고민이 많습니다..

 

<참고사항>

 

* Rhymix 2.1.18, php : 8.2.24 (64-bit), server : Apache

* 사이트 전체 스킨 및 게시판 스킨 : XEDITION (모바일뷰 사용 안함)

* 문서페이지 : 기본 스킨

* 게시판 : 기본 게시판 사용

TAG •
위로 아래로
댓글 13
  • Lv19

    게시판 본문에 들어가는 표라면 작성자들이 위의 팁을 직접 적용해야 할텐데 만약 그런 경우라면 현실적으로 소스 편집까지 기대하기는 어렵긴 하겠네요;;

    핵심은 css 편집보다는 table 태그를 div 태그로 감싸주는 게 선행해야 한다는 겁니다. 즉, 게시물마다 table 태그를 찾아서 div 태그로 감싸줘야 하는 거죠. 그렇게 하려면

    1) 기존 게시물은 관리자가 직접 들어가 소스를 고치든가, 아니면 애드온 등을 통해 일괄 처리를 하든가 해야 하구요.

    2) 새 게시물은 작성자가 표를 삽입할 때마다 overflow-x: auto가 적용된 div를 직접 코딩하거나, 아니면 글 등록시에 애드온 등을 통해 본문에서 table 태그를 찾아 div로 wrapping하고 db에 수정 저장해야 할 겁니다.

  • Lv19 Lv36

    단순 미관상의 문제이니, 굳이 게시물 소스를 수정하거나 애드온으로 html을 조작할 필요 없이 글읽기 화면에서만 jQuery로 div를 추가해도 무방할 것 같습니다. 게시판이나 레이아웃의 헤더스크립트 설정을 활용해서...

    <script>
    $(function() {
      $('.rhymix_content table').wrap('<div style="overflow-x:auto"></div>');
    });
    </script>

  • Lv36 Lv19
    오 그게 제일 간단하겠네요. 역시! ❤️
  • ? Lv2 
    div.rhymix_content{overflow-x: auto;}

    이렇게 css에 넣으시면 될건데요. 표가 길어지면 본문도 스크롤되는 단점이 있겠습니다.

     

    단점을 줄이고 더 안정적으로 쓰려면 table생성시 부모div를 자동생성되게 만들고 해당 div에 css 오버플로를 주면 될것같습니다.

  • ? Lv2 Lv19
    이 경우에는 본문 전체보다는 table을 바로 wrapping 해줘야 전체 페이지에 영향을 주지 않으면서 테이블만 가로 스크롤을 할 수 있을 겁니다.
    https://xetown.com/tips/1182610
  • ? Lv8
    좀 다른 경우이긴 한데, 예를들어 pc에서 가로폭이 800px으로 고정이고, 모바일에선 가로폭을 100%로 하고 싶다면 table에 css='tablewidth' 와 같은것을 하나 추가해서 미디어쿼리로 조정 하셔도 됩니다.
    물론 이형태는 테이블을 만들때마다 css를 추가해 줘야 하는 단점이 있긴 하지만, 가로 스크롤 없이 100%로 표 처리 하는게 필요할때 사용하시면 됩니다.
  • Lv3

    .rhymix_content  table { display: block; width: 100% !important;}
    .rhymix_content  table > tbody {  display: block; overflow-x: auto; }

    .rhymix_content  table { display: block; width: fit-content !important;  max-width: -webkit-fill-available }
    .rhymix_content  table > tbody {  display: block; overflow-x: auto; }

    요렇게 해 보세요. (살짝 수정했습니다. )

    https://www.orangeday.kr/board4/3024 요렇게 보입니다.

  • Lv3 Lv19
    와... 스타일 장인 ㄷㄷㄷ
  • Lv3 ? Lv1
    헉.. 정말 감사한데요.. 이걸 어느 php 파일에 추가해야 할까요..? (눈물)
  • ? Lv1 Lv3
    레이아웃 css 파일에 넣으셔도 되고. 보드스킨 css 파일에 넣으셔도 됩니다. 게시판 작성글에만 적용되는 스타일입니다.
  • Lv3 ? Lv1
    아.. 그렇군요! 혹시 문서나 위젯페이지에서는 방법이 없을까요?
  • ? Lv1 Lv3
    모든 테이블에 적용하시려면
    아래 내용을 레이아웃 css 파일에 추가해 주세요.
    table { display: block !important; width: fit-content !important; max-width: -webkit-fill-available !important; }
    table > tbody { display: block !important; overflow-x: auto !important; }
  • Lv3 ? Lv1

    우와! 감사합니다! ㅎㅎㅎ 정말 감사합니다 ㅎㅎ (아직 레벨1이라 좋은 답변 추가가 불가하네요 ㅠㅠ)