테이블을 모바일 친화적 인 것으로 포맷하는 방법은 무엇입니까?

Question

나는 내 첫 모바일 버전의 웹 사이트에서 일하고있다. HTML 테이블이 포함 된 기사가 1000 개 있습니다. 불행히도, 그들은 너비가 고정되어 일부 경우 (주로 포토 갤러리) 컨텐츠를 레이아웃하는 데 익숙합니다.

스크롤 막대를 사용하지 않고 모바일 화면에 멋지게 표시 할 수 있도록 이러한 테이블을 이동하고 포맷하는 방법에 대한 제안이 있다면 궁금합니다. 목록 또는 일련의 사업부와 협조하는 것. 어떤 아이디어?

jQuery mobile을 PHP의 프레임 워크 및 코드로 사용하고 있습니다.

내가 생각할 수있는 유일한 현재 '수정'은 <div>의 테이블을 width:100% 및 overflow-x:auto으로 배치하는 것입니다.

Answer 1

효과적으로, 당신은 CSS로 테이블을 파괴 할 것입니다,하지만 당신은 이런 식으로 뭔가를 시도 할 수 : 것

table{ 
    width: 100%; 
} 
tr{ 
    display: block; 
} 
td{ 
    float: left; 
    width: 24% 
} 

는 가지 이상의 테이블 행과 세포 이상 된 div의 무리처럼 행동한다. 실제 표 형식의 데이터의 경우이를 권장하지 않습니다. 그러나 화랑 및 배치를 위해 당신은 ok이어야한다.