忘れてしまったときや使おうと思うときにすぐ見れるよう、table
周りで使えるちょっとしたスニペットやプラグインの備忘録です。
ゼブラテーブル(CSS)
情報量が多くなりテーブルが長くなってしまったときなどに、少しでも見やすくなるよう行を交互にカラーリングする方法です。
実装にはCSS3の:nth-child
を使って下記のように記述します。
table tr:nth-child(odd) {
background-color: #f4fcfe;
}
上記を記述することで、奇数のtr
の背景色のみを変更することができます。
偶数にしたい場合は、odd
となっているところをeven
に変更します。
また、3n
にすれば3の倍数、5n
にすれば5の倍数というような指定もできます。
実際の表示は以下で確認できます。
ゼブラテーブル(jQuery)
IEのバージョンによってはCSS3に対応していないため、先程の方法では背景色が変更されていない場合があります。
どのブラウザでも同じ見栄えにしたい場合は、jQueryを使用することで実装します。
jQueryを使用するのであらかじめ読み込ませておき、それぞれ下記のように記述します。
$(function() {
$('table tr:nth-child(odd)').addClass('odd');
});
table .odd {
background-color: #f4fcfe;
}
jQueryで奇数のtr
に.odd
というclassを付加させ、あとはCSSで背景色を指定すれば実装ができます。
偶数にしたい場合などは先程のCSSと同様で、oddとなっているところをevenに変更します。
ちなみに、上記ではclassを付加してCSSで背景色を指定していますが、もちろんjQueryでスタイルを直接指定するのでも可能で、この場合は$('table tr:nth-child(odd)').css('background-color','f4fcfe');
のように記述することで同じ見栄えを実装できます。
実際の表示は以下で確認できます。
列にclassを付加する
例えば特定の列だけ背景色を変更したいとかテキストを右寄せしたい場合などに、th
やtd
といった要素に直接class指定するのをjQueryを使って実装する方法です。
th
やtd
といった要素にclassを記述していく方法だとセルが増えたときや順番を変更したいときなどに何かと面倒ですが、この方法を使えばそういったときも簡単に調整ができます。
サンプルとして4列ある中で一番左列のtd
に.color
というclassを付加して背景色を指定し、一番右列のtd
に.right
というclassを付加してテキストの右寄せを指定します。
jQueryを使用するのであらかじめ読み込ませておき、下記のように記述します。
$(function() {
$('table td:nth-child(1)').addClass('color');
$('table td:nth-child(4)').addClass('right');
});
table .color {
background-color: #f4fcfe;
}
table .right {
text-align: right;
}
先程ゼブラテーブルでも使用した:nth-child
をtr
ではなくtd
に指定にしてそれぞれ任意のclassを付加するように記述し、あとはCSSでスタイルを設定すれば特定の列だけ見栄えの変更などを行うことができます。
実際の表示は以下で確認できます。
CSS3で特定の列を装飾する
ちなみに、今回は全てのブラウザで問題なく表示できるようjQueryを使用する方法を紹介していますが、IEは非対応でも構わないということであればCSS3を使ってclassを使わないような形で実装ができます。
CSS3を使って実装したい場合は下記のように記述します。
table td:nth-child(1) {
background-color: #f4fcfe;
}
table td:nth-child(4) {
text-align: right;
}
マウスオーバーでセルの背景色を変更する
ゼブラテーブル同様、見やすくするためによく用いられるセルにマウスオーバーすると背景色が変更されるのを実装します。
特に難しいことはなく単純に:hover
を使用するだけで実装でき、下記はtr
要素に実装する方法です。
table tr:hover {
background-color: #f4fcfe;
}
実際の表示は以下で確認できます。
マウスオーバーでセルの背景色を変更する(IE6対応)
もうほとんど使うことはないかもしれませんが、IE6では:hover
をa
要素以外に使えないことから先ほどの方法では実装することができません。
IE6でも同じようにしたいという場合はjQueryを使うことで実装ができます。
jQueryを使用するのであらかじめ読み込ませておき、それぞれ下記のように記述します。
$(function() {
$('table tr').mouseover(function(){
$(this).addClass('hover');
}).mouseout(function(){
$(this).removeClass('hover');
});
});
table .hover {
background-color: #f4fcfe;
}
マウスオーバー時に.hover
というclassが付加されるようにjQueryで記述し、あとはCSSでそのclassに対して背景色を指定してあげれば、IE6でもマウスオーバーで背景色を変更することができます。
ユーザー側で行(セル)を削除できるようにする
そんなに実装されているところを見たことはないのですが、何かの機会で使うかもしれないし覚えておきたいので備忘録です。
沢山の情報量があるテーブルなどで、ユーザーが必要ないと感じた行(セル)を任意で削除できるようにする方法です。
jQueryを使用するのであらかじめ読み込ませておき、それぞれ下記のように記述します。
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>行の削除</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td><span class="remove">この行を削除する</span></td>
</tr>
・
・
・
・
・
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td><span class="remove">この行を削除する</span></td>
</tr>
</table>
table .remove {
cursor: pointer;
}
$(function() {
$('table .remove').click(function(){
$(this).parent().parent().remove();
});
});
jQueryで.remove
が指定されているspan
要素をクリックするとその親要素を削除するように記述し、CSSでspan
要素がクリックできることがわかりやすいようにcursor: pointer
を記述します。
実際の表示は以下で確認できます。
デモでは削除できる行(セル)をわかりやすくするために、上記機能と併せてCSSでマウスオーバー時に背景色を変えるのも同時に実装しています。
行にリンクを設定する
セルの中のa
要素ではなく、tr
要素にリンク先を設定して行全体をクリックできるようにする方法です。
もしセル内に別のリンク先がある場合は、クリックされた際にそちらが優先されます。
jQueryを使用するのであらかじめ読み込ませておき、それぞれ下記のように記述します。
<table>
<tr>
<th>Title 1</th>
<th>リンク先</th>
<th>アンカー</th>
</tr>
<tr data-href="https://www.google.co.jp/">
<td>Row 1</td>
<td>この行は Google にリンクされています</td>
<td><a href="https://www.nxworld.net/">NxWorld</a></td>
</tr>
<tr data-href="http://www.yahoo.co.jp/">
<td>Row 2</td>
<td>この行は Yahoo! にリンクされています</td>
<td><a href="https://www.nxworld.net/">NxWorld</a></td>
</tr>
<tr data-href="http://www.apple.com/">
<td>Row 3</td>
<td>この行は Apple にリンクされています</td>
<td><a href="https://www.nxworld.net/">NxWorld</a></td>
</tr>
<tr data-href="http://www.microsoft.com/">
<td>Row 4</td>
<td>この行は Microsoft にリンクされています</td>
<td><a href="https://www.nxworld.net/">NxWorld</a></td>
</tr>
<tr data-href="http://wordpress.org/">
<td>Row 5</td>
<td>この行は WordPress にリンクされています</td>
<td><a href="https://www.nxworld.net/">NxWorld</a></td>
</tr>
</table>
table tr {
cursor: pointer;
}
table .clickable:hover {
background-color: #f4fcfe;
}
$(function() {
$('table tr[data-href]').addClass('clickable').click(function(e) {
if(!$(e.target).is('a')){
window.location = $(e.target).closest('tr').data('href');
};
});
});
HTMLでtr
要素のdata-href
属性に行をクリックした際のリンク先を指定し、CSSではクリックできることやマウスオーバーしたときの状態がわかりやすくなるような指定をします。
最後にjQueryでクリックした要素がa
要素以外であれば、その要素の先祖要素で一番近いtr
要素のdata-href
属性の値に書かれているURLに遷移するように記述をします。
実際の表示は以下で確認できます。
セル幅を均等にする
デフォルトではそれぞれのセル内に書かれいる内容によって幅が決定・表示されるため、意図した見栄えやバランスのとれた表示にするためにth
やtd
にwidth
指定をする人は多いと思います。
それぞれのセルの大きさを全て違う幅にしたい場合は、先述したように任意の数値をCSSで指定してやれば良いのですが、単純に全てのセルを均等にしたい場合はわざわざth
やtd
それぞれにwidth
指定をしなくても、table-layout
というプロパティを使うことで簡単に各セル幅を均等にすることができます。
table {
width: 100%;
table-layout: fixed;
}
デフォルトではtable-layout
の値はauto
になっているので、それを上記のようにfixed
に変更します。
ちなみに、auto
の場合はテーブル全体を読み込み後に各セル幅など決定・表示するのに対して、fixed
の場合は1行目を読み込んだ時点で幅を決定して表示し始めるので、デフォルトよりもfixed
の方が早く表示されるらしいです。(個人的な体感ではそこまで内容が長くないものなら対して変わらない感じしますが...)
セル内の自動的な折り返しを禁止する
具体的な使用例というか使う場面を上手く説明できませんが、例えば特にセル幅は指定していないけど見出し(th
)の内容は改行せずに表示したいときなどに便利なプロパティで、個人的には結構使うことが多いです。
下記を記述するとデフォルトで折り返されてしまうセル内のテキストが改行されずに表示されるようになります。
table th {
white-space: nowrap;
}
数値によって背景色を変更する
td
要素の数値を取得・判別をし、その数値によって別々のclassを付加することでそれぞれ異なる背景色に変更する方法です。
jQueryを使用するのであらかじめ読み込ませておき、それぞれ下記のように記述します。
$(function() {
$('table tr').each(function() {
// 2番目のカラムを取得
var price = $('td', this).eq(1).text();
// 価格を数値に変換
price = price.replace(/,|\¥/gi,'');
if (price < 3000) {
$(this).addClass('level1');
} else if (price < 10000) {
$(this).addClass('level2');
} else {
$(this).addClass('level3');
}
});
});
table .level1 {
background-color: #9dd7e6;
}
table .level2 {
background-color: #a4eed2;
}
table .level3 {
background-color: #efa3a3;
}
jQueryの4行目でどのカラムの数値を取得するか記述し、あとはif
文でそれぞれ値と付加するclassを記述します。
また、このサンプルでは価格を想定して¥
と,
が入っているので、6行目はそれらを取り除く記述になります。
あとは、CSSでそれぞれのclassに対してbackground-color
を指定することで実装できます。
ちなみに、同じようにjQueryを使って値を取得して背景色を変更するものだと以下のようなものもあり、タイトルにも書かれているように、ヒートマップのような大量のデータを扱う際に非常に見易くすることができます。
レスポンシブWebデザインに対応させる
正直自分の中で「これ!」っていうのがなく、普段の案件などでも可能であれば見易さなどいろいろと考慮してテーブル以外の形で代用したりすることが多いです...。
ただ、どうしてもテーブルでやらなければいけない場合もあるので、そんなときはDesign Spiceさんの「レスポンシブWebデザインでテーブルを使う時の小技」をよく参考にさせてもらっています。
やはりIEがネックな感じではあるんですが、CSSやjQueryを使った全8種の対応方法がサンプル付きで解りやすくまとめられています。
簡単に見出しを固定できるjQueryプラグイン「Freezeheader」
CSSだけで実装するなど他にも方法はありますが、幾つか試してきた中で一番手軽だなと感じたjQueryプラグイン「Freezeheader」を紹介します。
特に難しい記述などすることもなく、通常のテーブルで簡単に実装できます。
使用方法
「Freezeheader」からファイルをダウンロードし、jQueryとjquery.freezeheader.js
を読み込ませた後、下記のようにそれぞれ記述します。
<table id="freezeheader">
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
・
・
・
・
・
<tr>
<td>Row 20</td>
<td>Row 20</td>
<td>Row 20</td>
<td>Row 20</td>
</tr>
</tbody>
</table>
$(function() {
$('#freezeheader').freezeHeader();
});
見ての通り、たったこれだけの記述で上記ソースの場合はthead
が固定されるようになります。
また、$("#freezeheader").freezeHeader({ 'height': '300px' });
のようにして高さを指定すると、スクロールバーが出るようなタイプ(多少CSSの調整が必要)にもなります。
ブラウザ対応はIEでも8以降であれば問題なく動き、Androidでは確認してませんがiPhoneでは問題なく動きました。
実際の動きやファイルのダウンロードなどはそれぞれ以下。
ソート機能を付けるjQueryプラグイン3選
以下は見出し(th
)をクリックするとtd
が昇順・降順とソートできる機能を付けることができるjQueryプラグインです。
中にはソート時にちょっとしたアニメーションが付けられるものもあります。
Tablesorter 2.0
少し古いのが気になるところですが、シンプルなソート機能を実装できるプラグイン。
オプションもいくつか用意されており、table要素外の要素をクリックでソートしたり、マルチソート機能の実装もできます。
プラグインのダウンロードや詳細、デモなどは以下より。
Stupid jQuery Table Sort
同じくシンプルなソート機能を実装できるんですが、ばかばかしいほど軽量と謳っているように軽いのが特徴のプラグイン。
プラグインのダウンロードや詳細、デモなどは以下より。
jQuery Animated Table Sorter
こちらも同じくシンプルなソート機能も実装できるんですが、上記2つとは違ってソート時の動きに「fade」や「slide」といったアニメーションを簡単に付加することができます。
アニメーションは幾つか用意されており、例えば「slide」では上下でアニメーションするものや、左へ現在の内容が流れるように消えていった後に右からソートされた内容が流れてくるというような動きがあります。
プラグインのダウンロードや詳細、デモなどは以下より。