テーブル

名前

BASICTABLE01

パーツバージョン

1.0.0

GCバージョン

1.3.0

パーツアイコン

要旨

テーブルの見出しが縦に並ぶように転置します。データ行が複数行で構成されている場合、データ行ごとにテーブル分割して出力します。

入出力仕様

table要素を選択します。行見出しが存在する場合は最初の1行目、列見出しが存在する場合は1列目である必要があります。th/td要素のcolspan属性およびrowspan属性は無視されます。

th要素もしくは data-gc-label="tableheader" 属性が付与されたtd要素をテーブル見出しとして判断します。data-gc-label属性の付与されていないtd要素の場合は、プリプロセスを指定することで見出しとして判断させることができます。

1行目が列見出しの場合、テーブル転置を行います。行見出し以外の行が2行以上存在する場合、データ行ごとにテーブル分割を行います。

オプション

配置方向

各カラムの配置方向を選択します。以下の選択肢から選択します。

► 横並び(デフォルト)

► 縦並び

追加するクラス(任意)

パーツのdiv要素に追加する独自クラスを指定します。スペース区切りで複数のクラスを指定することもできます。

style属性の変換(任意)

style属性を変換します。以下の選択肢から選択します。

► 何もしない(デフォルト)

► 特定プロパティを除き削除

► 削除

ビューの種類

テーブル表示

出力HTMLの外枠にdiv要素が配置されます。テーブル分割された場合は、各テーブルがtable要素として出力されます。

ビュー編集

削除属性定義

(<var gcp="item:start.removeAttrs">タグのvalue属性)

テーブル関連の要素に関して、定義された属性をHTMLから削除します。

ビュー編集タブ上でこの定義内容を編集し、削除対象属性を変更できます。

プリプロセス

最初のtr要素を見出しに設定(任意)

最初のtr要素が列見出しを表しているが、th要素ではない場合に指定します。

tr要素内の最初の子要素を見出しに設定(任意)

tr要素内の最初の子要素が行見出しを表しているが、th要素ではない場合に指定します。

テーブルの事前処理(必須)

テーブルの転置や分割などを行う必須プリプロセスです。

関連CSSセレクタ

.gcpBasicTable01(クラスセレクタ)

対応jQueryバージョン

なし

使用jQueryプラグイン

なし