読者です 読者をやめる 読者になる 読者になる

Handsontable のデザイン

Handsontable のデフォルトの罫線などの色を変えるCSS
配布されてるデザインだと罫線の色はグレー、ヘッダのセルの背景色などを変更したい場合、
デモサイトの、条件による動的にスタイルシートの変更を jQuery で動的に実行する方法もあるだろうが、
やはり固定CSSで定義した方が良い。配布しているCSSを上書きする方法なので、指定の方法は以下のように決まってる。

例)

f:id:posturan:20160313191334j:plain




.handsontable th {
    background-color: #edfcff;
}
.handsontable th {
    border-right : 1px solid #0000ff;
    border-bottom: 1px solid #0000ff;
   /* 
    border-right : 1px solid #000000;
    border-bottom: 1px solid #000000;
    */

}
.handsontable tr:first-child th {
    border-top: 1px solid #0000ff;
    /*
    border-top: 1px solid #0000ff;
    */

}
.handsontable th:first-child, .handsontable .htNoFrame + th {
    border-left: 1px solid #0000ff;
    /*
    border-left: 1px solid #000000;
    */

}
.handsontable th:last-child {
    border-right: 1px solid #0000ff;
    /*
    border-right: 1px solid #000000;
    */

}

.handsontable td {
    border-right : 1px solid #000000;
    border-bottom: 1px solid #000000;
}
.handsontable tr:first-child td {
    border-top: 1px solid #0000ff;
    /*
    border-top: 1px solid #000000;
    */

}
.handsontable td:first-child, .handsontable .htNoFrame + td {
    border-left: 1px solid #000000;
}
/* 固定 cell */
.handsontable .htDimmed {
    color: #d000aa;
    background-color: #e8e8e8;
}