CSS에서 반응 형 테이블을 만드는 방법

Question

테이블에 대해 아래에 언급 된 코드를 시도했지만 응답하지 않습니다. 누구든지이 코드를 수정하여 반응 형으로 만들 수 있습니까?

.content table { 
    border-collapse:collapse; 
    margin:0 0 1.625em; 
    width:100%; 
    font-size:90% 
} 
.content table h3 { 
    font-size:1em; 
    font-weight:300 
} 
.content tbody { 
    border-bottom:1px solid #444; 
    border-left:1px solid #444 
} 
.content tr:nth-child(odd) { 
    background-color:#eee 
} 
.content table th { 
    background-color:#0078d7; 
    color:#fff; 
    font-size:.85em 
} 
.content td,.content th { 
    vertical-align:top 
} 
.content th,.content td { 
    padding:3px 10px; 
    text-align:left; 
    border-top:1px solid #444; 
    border-right:1px solid #444 
} 

HTML

$menu .= '<table class="content"><thead><tr><th>Name</th><th>Description</th>‌​<th>Price</th></tr><‌​/thead>'; 

while (have_rows('sections_items')) : the_row(); 
    // Your loop code 
    $menu .= '<tr><td>'.get_sub_field('dish_names').'</td><td>'.get_sub_f‌ield('dish_descripti‌​on').'</td><td>$ '.get_sub_field('dish_price').'</td></tr>'; 
endwhile; 

$menu .= '</table> '; 

Answer 1

하는 것은 오버 플로우-X와 컨테이너에 넣어보십시오 : 자동,이 화면 크기 조정에 테이블의 가로 스크롤 막대를 데려 와야한다. 여기

<div style="overflow-x:auto;"> <table class="content"> .... </table> </div>

위가 마음에 "스크롤을 추가"테이블의 간단한 동작을 유지 대답 한 예입니다. 생각하지 않고 진보 된 수준의 테이블 반응성을 추가하는 것은 나쁘다. 화면의 크기가 너무 작 으면 테이블의 모든 행을 개별 테이블로 사용하려는 경우 Songqi Liu이 접근 방법입니다. 내가 좋아하는 것

한 가지 더이는 오른쪽에있는 값을 왼쪽에있는 헤더를 설정합니다 테이블 헤더

td:nth-of-type(1):before { content: "Name"; } 
td:nth-of-type(2):before { content: "Description"; } 
td:nth-of-type(3):before { content: "Price"; } 

의 스타일 상대에 추가 할 수 있습니다. 최소 장치 너비 및 최대 장치 너비은 모바일을 고려하고있는 다른 특성입니다. 확인 더 here

Answer 2

당신은 당신이 당신의 페이지가 정확히

'@media'을 원하는 같은 방법으로 보인다 확인 할 수 있도록 '@media'블록을 사용하려고 윈도우의 크기에 따라 테이블의 크기를 조정하려면 규칙은 화면 크기 배울 수 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 사용이 링크에 따라 CSS 값을 변경 나도 부트 스트랩 그리드 기능을 사용 또는 테이블 디스플레이 스타일을 수정하고 모바일에 테이블을 보여주는 무슨 짓을

Answer 3

더. 내가 보여주고 자하는 내용에 따라 둘 다 사용합니다. 당신이 테이블 요소를 사용하는 경우

@media (max-width: 767px){ 
    table{ 
     //styles you want to change 
    } 
} 

, 당신은 디스플레이 테이블과 TD 요소의 스타일을 변경할 수 있습니다 : 그것은 화면의 크기에 따라 바뀌는 있도록

의 핵심은 @media 쿼리를 추가하는 것입니다 : 모바일에있는을 차단 한 다음 수정하십시오.

권장하지 않는 또 다른 방법은 모바일 전용으로 완전히 새로운보기를 만들고 미디어 쿼리를 사용하여 원래 테이블을 숨기는 것입니다. 이렇게하면 중복 데이터가 생성되지만 자유롭게 사용자 정의 모바일보기를 자유롭게 사용할 수 있습니다.

예 :

.mobile-table{ // or whatever class you want 
    display: none; 
} 

@media (max-width: 767px){ 
    table{ 
     display: none; 
    } 
    .mobile-table{ 
     display: block; 
    } 
}