更新 at 2007 12 03
サンプル２，３において IE6 でテーブルが崩れていたものを修正．
CSS コードの修正はありません．
マウスオーバしたテーブルの行・セルをハイライト表示
CSS のみで，マウスオーバしたセルのスタイルを変更する方法を紹介したいと思います．
※ただし，IE6には対応していません．※Firefox 1.5, 2.0 で動作確認しております． IE7, Opera, Safari3.0(Win版) で動作確認しました．HTML コード：
<table>
<thead> <tr><th> aaa </th><th> bbb </th><th> ccc </th><th> ddd </th></tr> </thead>
<tbody>
<tr><td> a1 </td><td> b1 </td><td> c1 </td><td> d1 </td></tr>
<tr><td> a2 </td><td> b2 </td><td> c2 </td><td> d2 </td></tr>
<tr><td> a3 </td><td> b3 </td><td> c3 </td><td> d3 </td></tr>
<tr><td> a4 </td><td> b4 </td><td> c4 </td><td> d4 </td></tr>
</tbody>
</table>
元となるHTMLソースコードは上記のような一般的なもの． もとソースに手を加える必要はございません．
CSS コード：
/* テーブルのスタイル */
table, table * {
border-collapse: collapse;
border: 1px solid #ddd; /* テーブルのボーダの色 */
}
th, td {
width: 3em;
}
thead th {
background: #69d; /* 第一行目（項目名）のセルの色 */
}
th:first-child {
background: #88d; /* 左上のセルの色 */
}
td:first-child {
background: #ccc; /* 一列目のセルの色 */
text-align: center;
}
tfoot td {
background: #6d9;
}
tfoot td:first-child {
background: #8d8;
text-align: center;
}
/* マウスオーバしたセルのスタイル */
tbody tr:hover td {
background: #dff; /* 列のハイライト色 */
}
tbody tr:hover td:first-child {
background: #cdf; /* 第一行目のハイライト色 */
}
tbody tr:hover td:hover {
background: #acf; /* セルのハイライト色 */
}
上部はテーブル全体のスタイル指定，下部がハイライト部分のセル・行のスタイル指定になります．
色味等は好みで変えましょう（
青字部分）．
以下が実際にスタイルを適用したテーブルのサンプルになります．
Table サンプル １ マウスオーバ・ハイライト
| aaa | bbb | ccc | ddd |
|---|
| a1 | b1 | c1 | d1 |
| a2 | b2 | c2 | d2 |
| a3 | b3 | c3 | d3 |
| a4 | b4 | c4 | d4 |
縦の列（カラム）へのハイライトには対応していません．
なんとかしたい・・・．
テーブルの内容部分のみをスクロールする
＋αの部分．
テーブルが巨大になってしまった場合，第一列（ヘッド：項目名部分）を固定して，ボディ部分のみをスクロールさせる方法がある．
それを，HTML には全く手を加えず，CSS のみで表現する手法を提案．
使用する HTML コードは上記と同一．
特別なカスタマイズはいりません．
※ こちらは Firefox ブラウザにしか対応していません．CSS コード：
tbody {
height: 200px;
overflow: auto;
}
tbody タグに高さを指定（例では
200px）して，はみ出る部分はスクロールするようにする．
Table サンプル ２ スクロール/バグあり
| aaa | bbb | ccc | ddd |
|---|
| aa | bb | cc | dd |
| a1 | b1 | c1 | d1 |
| a2 | b2 | c2 | d2 |
| a3 | b3 | c3 | d3 |
| a4 | b4 | c4 | d4 |
| a1 | b1 | c1 | d1 |
| a2 | b2 | c2 | d2 |
| a3 | b3 | c3 | d3 |
| a4 | b4 | c4 | d4 |
※Firefox で見てみよう！
フッタも付けるとこのような感じ．
テーブルの内容部分のみをスクロールする 改良
上記のコードの場合，table の高さの解釈により，無駄な枠線（ボーダ）が表示され，見苦しいものとなる．
この現象を回避する為に，CSS を一部書き換える．
CSS コード：
table {
background: #ddd;
border-spacing: 1px;
}
th, td {
width: 3em;
background: #fff;
}
border-collapse や border の指定は消します． 枠をボーダではなくて，セル間の空白で表現．
以下のようになります．
Table サンプル ３ スクロール/バグ修正
| aaa | bbb | ccc | ddd |
|---|
| aa | bb | cc | dd |
| a1 | b1 | c1 | d1 |
| a2 | b2 | c2 | d2 |
| a3 | b3 | c3 | d3 |
| a4 | b4 | c4 | d4 |
| a1 | b1 | c1 | d1 |
| a2 | b2 | c2 | d2 |
| a3 | b3 | c3 | d3 |
| a4 | b4 | c4 | d4 |
※Firefox で見てみよう！
横スクロールバーが出てきてしまうのは・・・見逃してください．
ref.- 参考：web creators 2008年1月号 目次»
--
１２月になりました． やりたい事が増えてきた．
