• table

  • tableに関する説明です。
  • table

通常のテーブルです。
header header header
column column column
column column column
テーブルの幅は、htmlソースのクラス名 ef-w100p でコントロールします。詳しくは こちら をご覧ください。

  • table (view)

tableの装飾についての説明です。
align colgroup width bg color
text left colgroup bg width blue
text center colgroup bg width red
text right colgroup bg width gray
背景色については こちら をご覧ください。
th,tdの幅指定に関しては こちら をご覧ください。

  • table (border,vertical)

ボーダーと位置指定(縦)についての説明です。
border
tr > td border tr > td border tr > td border tr > td border tr > td border
         
all top right bottom left
vertical
top middle bottom
ボーダーのクラスをtrに付与する事で配下のth,tdにボーダーを付ける事ができます。

テーブルに使えるボーダーは gray(default) red theme の3色が使えます。ボーダーについての詳しい説明は こちら をご覧ください。

  • table (hover,highlight,click)

ホバー、クリックした際の装飾についての説明です。
hover
hover hover hover hover
hover hover hover hover
hover hover hover hover
highlight
highlight highlight highlight highlight
highlight highlight highlight highlight
highlight highlight highlight highlight
click select
click select click select click select click select
click select click select click select click select
click select click select click select click select
hoverの装飾はhtmlソースの thead,tbody,tr,colgroup にクラス名 is-hover を付与してください。

hightlightを表示したままにする場合は、htmlソースの tr,colgroup にクラス名 is-highlight を付与してください。

click時の装飾はhtmlソースの thead,tbody にクラス名 js-select-tr を付与してください。

一部のthやtdに、これらの装飾をさせたくない場合は対象に is-reset を付与してください。

  • table (check)

checkbox付きのテーブルです。
header header header header
column column column option
column column column option
column column column option

  • table (col focus)

ターゲットとなるcolgroupをフォーカスします。
header header header header header header
column column column column column option
column column column column column option
column column column column column option

  • table (same class)

同じクラス名を持つth,tdをフォーカスさせます。
price price price total
1day 156 7,899 1,587 16,452
2day 156 7,899 1,587 16,452
3day 156 7,899 1,587 16,452
htmlソースのクラス名 js-sameclass 配下の js-sameclass-num* の数値が同じ場合にそれぞれがフォーカスされます。