テーブルのセルをハイライトするCSS +α
更新 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 |
フッタも付けるとこのような感じ．
テーブルの内容部分のみをスクロールする 改良
上記のコードの場合，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 |
横スクロールバーが出てきてしまうのは・・・見逃してください．
- ref.
- 参考：web creators 2008年1月号 目次»
--
１２月になりました． やりたい事が増えてきた．
5 comments:
へー。自分はCSS弱いからこういうtipsはひじょーにたすかるｗ
お コメントありがと～
このところ CSS とか JS と遊んでばかりなのでめっきり軟弱になりました．
溜めてるネタもあるんだけど，文章に起こす気力がないす．
ExtJsネタやってほしー！と思う今日このごろ。http://extjs.com/
Ext.js ってのは初めて聞いた．
こういうのは今まで敢えて避けてきてたからなあ…． 何でもかんでもラッピングして覆い隠すというのがあまりすきでない．
iPhone にも使われる UI ライブラリなのか．
ちょっと「勉強」してみようかな．
Oi, achei seu blog pelo google está bem interessante gostei desse post. Gostaria de falar sobre o CresceNet. O CresceNet é um provedor de internet discada que remunera seus usuários pelo tempo conectado. Exatamente isso que você leu, estão pagando para você conectar. O provedor paga 20 centavos por hora de conexão discada com ligação local para mais de 2100 cidades do Brasil. O CresceNet tem um acelerador de conexão, que deixa sua conexão até 10 vezes mais rápida. Quem utiliza banda larga pode lucrar também, basta se cadastrar no CresceNet e quando for dormir conectar por discada, é possível pagar a ADSL só com o dinheiro da discada. Nos horários de minuto único o gasto com telefone é mínimo e a remuneração do CresceNet generosa. Se você quiser linkar o Cresce.Net(www.provedorcrescenet.com) no seu blog eu ficaria agradecido, até mais e sucesso. If is possible add the CresceNet(www.provedorcrescenet.com) in your blogroll, I thank. Good bye friend.
Post a Comment