rex0220 印刷屋プラグイン 見積書のCSSカスタマイズ

rex0220 印刷屋プラグイン 見積書のCSSカスタマイズを行ってみます。

概要

サンプルの見積書は、シンプルなデザインですので少し CSS で装飾をしてみます。

• 見積明細部分のヘッダー部の色
• 明細部について偶数・奇数行で背景色を交互にして視認性アップ

• CSS カスタマイズ前後の比較

CSS カスタマイズ

共通CSSは、そのままで個別CSSに CSSを設定します。
帳票には、共通CSS＋個別CSSが適用されますが、個別CSSの効果が優先されます。

見積明細部へのCSS適用内容

.pcraft-inv-item-table thead {
    background-color: #2c3e50;
    color: white;
}

.pcraft-inv-item-table th,
.pcraft-inv-item-table td {
    border: 1px solid #ddd;
}

.pcraft-inv-item-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}