모바일 상태에서 <table> 개체가 글로 나옴

[pat-al]

1.10의 모바일 화면 상태(default/lucid 스킨)에서 글에 table 태그로 들어간 표가 줄글로 나옵니다.

[inureyes]

이 부분을 어떻게 수정하면 좋을까요? 모바일에 표를 그냥 출력하게 하면 디자인이 깨지는 문제가 생길 때가 있고, 지금처럼 태그 자체를 스트리핑하면 뭐가 뭔지 알 수 없게 되는 문제가 있습니다.

가능한 안으로는 테이블 태그를 파악해서 내부의 style 요소 중 width, height, font-size 등의 요소를 몽땅 스트리핑하고 오토스케일이나 responsive 속성을 강제로 매기는 방법이 있는데, 이거 어쩐지 오버테크놀로지 같긴 하네요. 좋은 의견 있으신 분들 부탁 드립니다.

[pat-al]

데스크톱용 스킨에 나오는 대로 모바일 스킨에도 거의 같은 내용으로 나온다고 생각했는데 꼭 그렇지는 않은가 보네요. 저는 데스크톱용 스킨에서도 표에 대해서 CSS를 따로 넣어 쓰고 있고, 너비 때문에 스킨 디자인이 깨지거나 어색해 보이면 스타일 요소를 넣어 조정하고 있습니다. 모바일 스킨에서 글이나 CSS로 표의 스타일 요소를 적용할 수 없다면, 사용자가 다른 묘안이 있어도 바꿀 길이 막혀 답답할 것 같습니다. 모바일 스킨에 알맞은 디자인 요소는 기본으로(또는 강제로) 지정하되, 사용자 재량으로 고쳐 쓸 수도 있게 글에 들어간 테이블 태그의 스타일 요소도 그대로 출력해 주는 쪽이 좋겠다고 생각합니다.

[zvuc]

표는 사실 모바일에서는 어떻게 해도 답이 없더라구요(..) 저도 그래서 테이블 어지간하면 안 쓰는데 http://xenosium.com/553 이거 쓰면서 테이블을 쓸수밖에 없어서 만들었는데, 모바일 세로에서 접속해보시면 일단 저건 텍스트 내용이 많이 않아 가로폭을 줄여도 어떻게든 wrap이 되긴 합니다만.

컨텐츠 readability를 저해하지 않고 기존 레이아웃을 유지한채 좁은 폭의 화면에서 보여주게 하는 방법은 아마 table자체에 가로 스크롤바를 넣는다든가 해서 페이지 자체는 고정폭을 유지한채 해당 섹션만 스크롤할수 있게 하는 방법밖엔 없지 않나 싶습니다

[pat-al]

제가 자주 쓰는 표는 이런 식입니다. http://pat.im/366 http://pat.im/836 위 글에 나오는 표들은 겉모습보다 내용이 중요하고, 테이블 태그를 쓰지 않는다면 정보를 간편하게 나타낼 방법이 마땅하지 않습니다.

반응형 스킨에서 표가 완벽하게 자동 조절되지 못하여 더러 깨지더라도, 보는 사람이 "이것이 표(table 태그)로 만들진 듯하니 넓은 화면에서 보면 잘 보이겠구나" 하고 알아차릴 수만 있으면 만족할 만합니다. 지금 줄글로 나오는 상태에서는 스팸 글처럼 보이기도 해서 좀 그렇습니다.

[zvuc]

링크해주신 첫번째 글같은 경우는 모바일 레이아웃으로 봐도 큰 문제가 없을텐데 두번째 글같은 복잡한 테이블은 폭을 줄여서는 볼수있을 정도의 가독성을 유지하는건 불가능한지라 결국 스크롤밖에는 답이 없을것 같은데요.

http://exisweb.net/responsive-table-plugins-and-patterns

잠시 검색해보니 이런것이 있네요.

@media screen and (max-width: 640px) {
    table {
        overflow-x: auto;
        display: block;
    }
}

제가 위에 말했던것처럼 폭이 320px보다 넓을 경우 그냥 스크롤바를 만들어주는 방식인데, 아마 이게 현재로써는 가장 적용하기 쉬운 방법이 아닐까 싶습니다.

[inureyes]

일단 테이블 태그 스트리핑 부분을 제거한 후, lucid에 @zvuc 님 방법을 적용해 보도록 하겠습니다. :)

[inureyes]

복잡한 표 예제를 넣어보니 뭔가 왕창 빠져 나옵니다.