WebDataGrid の外観変更 - インフラジスティックス・ジャパン株式会社Blog

WebDataGrid にはセルやヘッダといったエレメントに対応する CSS クラスが用意されており、これらを変更することで外観を変更することができます。

以下はよくお問い合せ頂くエレメントと対応する CSS クラスです。今回はこれらエレメントに変更を加えてみました。

エレメント	CSS	変更点
セル	tbody.igg_Item > tr > td	高さ縦罫線(デフォルトでは横罫線のみ表示) 文字色
ヘッダ	.igg_HeaderCaption	文字位置文字色
レコードセレクター	.igg_HeaderCaption	横幅

<style type="text/css">

    /* セル */
    tbody.igg_Item > tr > td {

        /* 行の高さを変更 */
        height: 10px;
        line-height: 10px;

        /* セルの縦罫線 */
        border-right: 1px solid #D8D8D8;

        /* セルの文字色変更 */
        color: Maroon;
    }

    /* ヘッダ */        
    .igg_HeaderCaption {
        text-align: center;
        color: Black;
    }

    /* 行セレクター */
    .igg_RowSelector {
        width: 10px;
    }

</style>