fixed_midashi.jsでtableの見出し（ヘッダ）を固定したいが、見出しの背景色を変更したい。

Question

fixed_midashi.jsというライブラリを用いて、tableの見出し（ヘッダ）を固定したいと考えています。
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html

見出しの固定自体はうまくいくのですが、見出し部分の背景色が白になっています。
私が作っているページは、背景色が黒、文字色が白なので、見出し部分も同様に処理したいと考えています。

下記のコードのどこをどう変えたらそれがうまくいくでしょうか。
（コード全部を貼りつけようかと思ったのですが、10000文字を超えてしまうため、できませんでした。）
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/fixed_midashi.js

お分かりの方、よろしくお願い致します。

Answer 1

普通は、table の色などを変えるのは、 javascript のコードを変更するのではなく、 stylesheet (*.css) や html ファイルを変更します。

次のデモページ
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/demo_page.html
の場合は、見出し行の背景色は
tr.header { text-align:center; background-color:#bbbbee; }
として指定していることがわかります。
chrome の開発者ツールをつかって、この部分を書き換えてやると、
背景色が変わることが確認できます。
まずは 開発ツールを開き、見出し行の部分にどのようなスタイル指定がされているかを調べました。
![イメージ説明]WIDTH:600

背景色を指定している部分を red に変更してみました。
![イメージ説明]WIDTH:600

chrome の開発者ツールの使い方については、http://weback.net/utility/1410/ などを参照してください。

mulberryfields さんの作成ページの中でも 見出し行の部分の背景色を指定している部分があるとおもいます。そこを見つけて指定色を書き変えてあげれば、お好みの色に変更できるはずです。

Comments

[退会済みユーザー]

ありがとうございます。返事が遅くなりすみません。
chromeの機能を使って、色々試してみました。
このライブラリは、JavascriptでCSSをいじっているので、どこを調整したらよいかなかなか分からなかったのですが、結果的に、下記のように変更を加えてうまくいきました。
【変更前】
function _color(a,b){var c=Math.round(a+(255-a)*(1-b));return Math.min(c,255)}
【変更後】
function _color(a,b){var c=Math.round(a+(0-a)*(1-b));return Math.min(c,255)}

Answer 2

質問から外れてしまうのですがそのライブラリを使わずに以下のリンク先の方法はどうでしょうか？
(どうもtheadというタグが希望の挙動に関係あるようですよ)

以下のリンク先記載の物は希望の挙動とは異なりますか？
もし希望通りの動作なら以下のリンク先の方法で実装すれば、希望のデザインをCSSで定義することは簡単になるでしょう。

HTML/CSSヘッダー固定のスクロールテーブル
CSSによるおそらく最も簡単にヘッダとフッタを固定するスクロールテーブルの実装方法

Comments

[退会済みユーザー]

ありがとうございます。
私はheaderにcol-spanを用いていたのでなかなかうまくいかなかったのですが、シンプルに実現する方法があるというのは参考になりました。