1

私は現在、ウェブとiPhoneの両方のウェブサイトをデザインしています。iPhoneにテーブルが表示され、問題が発生しています。

私のコンピューターでは、テーブルは正常に見えます。私はすべてを見ることができます。しかし、私のiPhoneでは、2つの行しか表示できず、他の2つの行は画面を超えているため、表示されません。（スクロールバーはありません）

テーブルが画面の幅に収まるようにするにはどうすればよいですか？これはcssです：

私はcssで@mediaを使用しています。

これは、テーブルの.cssです。

  .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;
}

iPhoneバージョンの.cssは次のとおりです。

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

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

私はしたい..テーブルを分割します..2つのTHと2つのTDを表示するように。その下に、さらに2つのTHと2つのTDがあります。等々...

4

3 に答える 3

2

レスポンシブデータテーブルのまとめをご覧ください。ここには完璧な解決策はありませんが、あなたが抱えている問題を解決するためのインスピレーションを見つけることができます。

また、なぜモバイルに関してのみiPhone向けに開発するのでしょうか。他にも愛に値するデバイスが何百万もあります！

于 2012-06-06T11:30:11.027 に答える
1

私にとって最も効果的なのは、フォントサイズを小さくする以外に、テーブルの水平スクロールを有効にすることです。以下の例：

HTML：

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

CSS：

div.wrap { width: 100%; overflow-x: auto; }
于 2015-06-29T03:20:35.263 に答える
0

別々のテーブルをdivに入れ、divを左にフロートさせます。これにより、テーブルが水平方向に隣り合って配置されます。

于 2012-06-06T10:45:57.027 に答える