iPhone CSS에 표 맞추기

Question

현재 웹 및 iPhone 용 웹 사이트를 디자인 중입니다. 나는 아이폰에 테이블을 보여주는 문제에 직면하고있다.

내 컴퓨터에서 표는 정상적으로 보입니다. 나는 모든 것을 볼 수있다. 하지만 내 iPhone에서는 화면 너머로 볼 수 있기 때문에 두 행만 볼 수 있고 다른 두 행은 보이지 않습니다. (스크롤바가 없습니다.)

어떻게하면 화면이 화면 너비에 맞을까요? 이것은 CSS입니다 :

나는 CSS에서 @media를 사용하고 있습니다. 쇼처럼 .. 내가 .. 테이블을 파괴 할

.blacklist table{ 
     visibility:collapse; 
    } 
    .blacklist th{ 
     width:25%; 

    } 
    .blacklist thead th img{ 
     display:none; 
    } 
    .blacklist thead th .title{ 
     text-align:center; 
     padding:7px; 
    } 

: 여기

.blacklist{ 
     width:100%; 
    } 

.blacklist thead th{ 
    border:1px solid #e2e2e2; 
    width:25%;  
} 
.blacklist thead th img{ 
    width:72px; 
    height:72px; 
    float:left; 
} 
.blacklist thead .title{ 
    text-align:left; 
    padding-top:23px; 
    font-size:18px; 
} 
.blacklist tbody td{ 
    border:1px solid #e2e2e2; 
    padding:5px; 
} 
.blacklist .button-holder{ 
     text-align:center; 
     margin:7px; 
} 

아이폰 버전에 대한 .CSS입니다 :

이

은 테이블에 대한 .CSS입니다 두 개의 TH와 두 개의 TD가 있습니다. 그 밑에는 TH가 2 개, TD가 두 개 더 있습니다. 등등 ...

Answer 1

Responsive Data Table Roundup을 살펴보십시오. 여기에 완벽한 해결책은 없지만 당신은 가지고있는 문제를 해결할 수있는 영감을 얻을 수 있습니다.

또한 휴대 기기에서만 iPhone 용으로 개발해야하는 이유는 무엇입니까? 그 밖에 사랑을받을 자격이있는 수많은 장치가 있습니다!

Answer 2

별도의 테이블을 div에 넣고 왼쪽 div를 플로팅하십시오. 그러면 테이블이 서로 옆에 수평으로 배치됩니다.

Answer 3

나에게 가장 좋은 점은 글꼴 크기를 줄이는 것 외에 가로 스크롤을 테이블에 사용할 수 있다는 것입니다. 울부 짖는 예 :

HTML :

<div class="wrap"> 
    <table> 
    ... 
    </table> 
</div> 

CSS :

div.wrap { width: 100%; overflow-x: auto; }