Still Laughin'

結局、カラムの非表示やヘッダー固定はまだ導入していません。
そのかわりに、テーブルの化粧直しをしました。

「プランB」のデザインは、「BlackPepper」をベースにしているので、背景は真っ黒です。　テーブルのスタイルは、

table{
  table-layout : fixed;
  empty-cells : show;
  border-collapse : collapse;
}
table.list{
  border-spacing : 2px;
}
table.list tr{
  height : 30px;
}
table.list th{
  border : 1px solid white;
  text-align : center;
  background:#222222;
}
table.list td{
  padding : 0px;
  border : 1px solid white;
}

という感じ。　絵柄としては、下のようになります。　シンプルですが、味も素っ気もないですね。

自分で気の利いたデザインが出来ればよいのですが、そんなセンスはないので借り物で対処です。　つまり、jQuery UI のテーマで使われている背景画像を使いまわします。　デザインの統一性も取れますしね。

table.list th{
  border : 1px solid #222222;
  text-align : center;
  background:url("./js/css/dark-hive/images/ui-bg_highlight-soft_44_444444_1x100.png") repeat-x scroll 50% 50% #444444;
}
table.list td{
  padding : 0px;
  border : 1px solid #444444;
}

borderの色も暗くして、さらに jQuery Corner で上辺両角を丸くします。

<script type="text/javascript" src="./js/jquery.corner.js"></script>
    <script type="text/javascript">
      $(function() {
        $("table.list th:first-child").corner("tl");
        $("table.list th:last-child").corner("tr");
      });
    </script>

で、出来上がりはこんな感じになりました。

だいぶ雰囲気が変わりました。　ゴテゴテしたのは好きではないので、このくらいがいいですね。