HTML 테이블과 아이프레임의 반응형 웹 지원 추가

반응형 웹, 또는 모바일 웹에서는 컨텐츠를 표현할 때 테이블과 아이프레임은  가능하면 피해야 하는 요소입니다.

이 두 태그는 컨텐츠의 표현 방법이 모바일이나 반응형에 적합하지 않고, 고정 크기를 가지는 경우가 많아, 모바일 기기에서 화면이 오른쪽으로 밀려나는 문제점을 발생시킵니다.

모바일 기기의 특성상 위/아래 스크롤만 되어야 하는데, 테이블이나, 아이프레임에 정한 크기값이 모바일 기기 가로보다 넓으면 크기 만큼 오른쪽으로 스크롤이 가능하게 됩니다.

너비가 모바일 대응이 되도록 테이블이나 아이프레임 너비를 가로 100%로 지정하면, 테이블이나 아이프레임의 내용이 아래로 한없이 길어지는 문제가 나타납니다.

최고의 방법은 아니지만 모바일 레이아웃이 유지되면서 테이블과 아이프레임만 좌우로 스크롤해서 내용을 확인할 수 있도록 자바스크립트로 전처리를 할 수 있습니다.

방법은 간단해서 테이블과 아이프레임을 모바일 레이아웃에 맞는 <div></div> 태그로 감싸고, 가로 스크롤이 가능하도록 해주면 됩니다.

// 모바일에서 테이블 감싸서 스와이프로 볼 수 있게 함.function wrapTable(){  var tables = document.querySelectorAll("body table");
  if( tables.length > 0 ){    tables.forEach(function(table){      table.outerHTML = '<div class="mobile-wrapper">'+table.outerHTML+'</div>';    });  }}
//모바일에서 아이프레임 감싸서 스와이프로 볼 수 있게 함.function wrapIframe(){  var iframes = document.querySelectorAll("body iframe");
  if( iframes.length > 0 ){    iframes.forEach(function(iframe){      iframe.outerHTML = '<div class="mobile-wrapper">'+iframe.outerHTML+'</div>';    });  }}
document.addEventListener('DOMContentLoaded', ()=>{  if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){    wrapTable();    wrapIframe();    }});

모바일 기기이면 각각 아이프레임과 테이블에 대해 <div></dov> 태그로 감싸 모바일 기기 100% 영역을 넘지 않도록 합니다.

"mobile-wrapper" 클래스는 모바일 기기 가로 화면에 맞춰 가로 스크롤바가 생길 수 있도록

.mobile-wrapper {  overflow: auto;  width: 100%;}

이렇게 해주면 웹 레이아웃도 깨지지 않고 모바일 기기에서 테이블과 아이프레임만 따로 가로로 스와이프를 해서 확인할 수 있게 됩니다.