5

アプリケーションの 1 つで( http://nicolas.kruchten.com/pivottable ) pivottable.js を使用しています。テーブルは正常にレンダリングされましたが、UI に応答性を追加する際に問題に直面しています。テーブルは、メディア クエリを使用して小さなビュー ポート用に定義された div サイズに縮小されません。ビューポートに関係なく、テーブルは常に同じサイズでプロットされます。また、テーブルの列の幅は変更できないようです。pivot.css で col の定義済みクラスを変更しようとしましたが、うまくいかないようです。

table.pvtTable .pvtColLabel {text-align: center; width:50px;}
table.pvtTable .pvtTotalLabel {text-align: right; width: 50px;}

また、以下は、テーブルがプロットされる「グラフ」クラスの div でメディアクエリを使用した方法です。

@media (min-width: 320px) and (max-width: 640px) {

    /*Making gray box span across the screen*/
    body {
        padding-left: 0px; /*changed to avoid hz scroll on mobile device*/
        padding-right: 0px; /*changed to avoid hz scroll on mobile device*/
        padding-top: 0px;
    }
    #console {
        /* Negative indent footer by it's height */
    margin: 0px auto -40px;
}
.graph {
     width:250px;
     height:270px;
}
.wrapper-gray{
    background-color: #ebebeb;
    padding: 5px;
}


.section-box{
    background-color: #fff;
    padding: 5px;
}
}

私がどこかで間違っている場合は、私を導いてください。

4

2 に答える 2