반응 테이블 - Divs로 테이블 교체

Question

나는 현재 내 반응 테이블을 만들고 있습니다. 나는 거의 도움이 거의 없어 특히 Manji. 지금해야 할 일은 브라우저가 996px 너비 아래에있을 때 테이블 아래에 div를 추가하거나 교체하는 것입니다. 지금까지 나는 이것을 가지고있다

$(window).on("load resize orientationchange", function() { 

     var width = $(window).width(); 

     if (width <= 996){ 
      $(table).replaceWith(output); 
     } else { 
      //bring it back 
     } 
    }); 

브라우저 창을 작게 만들었지만 obvis는 작동한다. 크기를 조정할 때 정상으로 되돌아 가지 않습니다.

DEMO HERE에서 확인할 수 있습니다.

제 질문은 올바르게 작동하려면 어떻게해야합니까? 더 좋은 방법이 있습니까?

Answer 1

이 처리하는 가장 간단한 방법은 콘텐츠를 즉석에서 프론트까지하지를 구축하는 것입니다.

먼저 '모바일'표를 올바른 스타일 (이 경우 디스플레이 없음)로 설정해야합니다.

output += '<div class="mobiled-table" style="display: none">'; 

당신의 DOM의 나머지는 평소와 같이 진행을 구축,하지만 우리가 그것을 쓰기 마친 후 우리는 즉시 렌더링 :

output += '</div>'; 
var mobile_table = $(output); 
$(table).after(mobile_table); 

이제 이벤트가 우리가 렌더링있는 한/쇼를 숨길 무료입니다 :

$(window).on("load resize orientationchange", function() { 
    if ($(window).width() <= 996) { 
     mobile_table.show(); 
     table.hide(); 
    } else { 
     mobile_table.hide(); 
     table.show(); 
    } 
}); 

실제 이벤트가 발생하면 매우 큰 테이블은 DOM 작성 시간 (큰 테이블에서 중요 할 수 있음)을 초래하지 않음을 의미합니다. 또한 jQuery에서 DOM 건물을 푸시 할 수 있음을 의미합니다 (실제로는 적합하지 않지만 연결을 통해 DOM을 빌드 할 수 있음). 데이터베이스에 부호가 없거나 크면 조심하십시오.) 대신 모바일 테이블을 렌더링하는 것과 동일한 코드로 모바일 테이블을 렌더링 할 수 있습니다. 조 Frambach가 표시된

또한 당신이 다음, 완전히 jQuery를 벗어나 CSS에이 물건을 이동할 수 있습니다, 그것은 빠르고 될 위치를 명확 :

.mobiled-table { display: none } 
@media (max-width: 996px) { 
    table { display: none } 
    .mobiled-table { display: block !important } 
} 

Answer 2

당신은 순수한 CSS에서 이것을 할 수 있습니다. 그것은 꽤되지 않습니다하지만 당신은 그것을 할 수 있습니다.

@media (max-width: 600px) { 
    table, thead, tbody, th, tr, td { 
    display: block; 
    } 
} 

그리고 그게 전부입니다!

http://codepen.io/anon/pen/qFDvr

Answer 3

당신이 당신의 테이블을 변환 할 수있는 온라인 도구가있다 몇 번의 클릭만으로 구성 DIV 요소에 : www.html-cleaner.com

이 기능에 대한 자세한 내용을 읽고 여기에 사용할 수있는 CSS 코드 찾기 : http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/