表組

基本の表組

#table_basic
単位：千円
1 2 3
1 2 3
1 2 3

注釈テキスト

tableの前にspan.note-shoulderを記述することで、表組の右肩に単位などを表示できます。tableの後にp.help-blockを記述することで表組の下に注釈を付けることができます。

<span class="note-shoulder">単位：千円</span>
<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
<p class="help-block">注釈テキスト</p>
列区切りにもボーダーあり

tableに.table-borderedを追加します。

#table_border
1 2 3
1 2 3
1 2 3 
<table class="table table-bordered">
...
行を交互に色付け

tableに.table-stripedを追加します。

#table_striped
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3 
<table class="table table-striped">
...
ボーダー すべてなし

tableに.table-noborderを追加します。区切りがなくなるので.table-stripedと併用します。

#table_noBorder_striped
1 2 3
1 2 3
1 2 3 
<table class="table table-noborder table-striped">
...

ハイライト

セルに対してマウスオーバーで行全体のハイライト、クロスハイライトすることが可能です。

マウスオーバーで行をハイライト

tableに.table-hoverを追加します。また行をクリックでアクションを実行する場合は.table-hover--pointerを追加してhover時のカーソルをpointerに変更します。

#table_hover
1 2 3
1 2 3
1 2 3

hover時にカーソルをpointerにする

<table class="table table-hover">
...
マウスオーバーでセルをクロスハイライト

tableに.table-hover-cellを追加します。またセルをクリックでアクションを実行する場合は.table-hover-cell--pointerを追加してhover時のカーソルをpointerに変更します。

#table_hoverCell
1 2 3
1 2 3
1 2 3
1 2 3

hover時にカーソルをpointerにする

<table class="table table-bordered table-hover-cell">
...

セルの着色

表組内で、文字色のみ、セルと文字色、行ごと着色できます。例としてエラーとなっている値や行はdangerで、完了済ステータスとなっているレコードの行をmutedにしたりします。

#table_cellColor
th強調 2 3 4 5
セル success セル info セル warning セル danger セル muted
文字 success 文字 info 文字 warning 文字 danger 文字 muted
行 success 2 3 4 5
行 info 2 3 4 5
行 warning 2 3 4 5
行 danger 2 3 4 5
行 muted 2 3 4 5
HTML
<table class="table table-bordered">
  <thead>
    <tr>
      <th class="emphasis">th強調</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td class="success">セル success</td>
      <td class="info">セル info</td>
      <td class="warning">セル warning</td>
      <td class="danger">セル danger</td>
      <td class="muted">セル muted</td>
    </tr>
    <tr>
      <td class="text-success">文字 success</td>
      <td class="text-info">文字 info</td>
      <td class="text-warning">文字 warning</td>
      <td class="text-danger">文字 danger</td>
      <td class="text-muted">文字 muted</td>
    </tr>
    <tr class="success">
      <td>行 success</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr class="info">
      <td>行 info</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr class="warning">
      <td>行 warning</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr class="danger">
      <td>行 danger</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr class="muted">
      <td>行 muted</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

レスポンシブ

#table_responsive

tableを.table-responsiveで囲むことで、スマートフォンでの表示(極小スクリーン<768px)時に表組に横スクロールを付けることができます。

ただ、スクロールをつけたとしても、本来スマートフォンは大きな表組を表示するには向きません。スクリーンサイズの制約で閲覧性を損ねるのみならず、スマートフォンからシステムを利用するときの目的やシーンを考えると、表組の形で情報を提示するのではなく、抜粋したりリスト形式に組み替えるなど、スマートフォンでのユーザー体験に最適になるように別途定義するべきです。

簡便にレスポンシブ対応するためのクラスとして用意してはいますが、安易にこれで済ませることのないようにしましょう。

<div class="table-responsive">
  <table class="table">
  ...
  </table>
</div>

表組内のフォームパーツ

セル内ドロップダウンやセル内ボタンや検索用フォームの実装は、基本的に各コンポーネントの実装方法と相違ありません。各コンポーネントの章を参照してください。コンポーネントを実装する際にはセルに
.cell-controlを付与してください。テキストフィールドには.input-sm、ドロップダウンには.select-sm、ボタンには.btn-smが自動で付きます。

#table_form
ソート降順 ソート降順 現在基準 ソート昇順   
<!-- チェックボックス -->
<th class="cell-control">
  <label class="checkbox no-label" for="checkbox1">
  <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
  </label>
</th>

<!-- ラジオボタン -->
<td class="cell-control">
  <label class="radio no-label" for="radio1-01">
  <input type="radio" name="group1" value="1" data-toggle="radio" id="radio1-01">
  </label>
</td>

<!-- 検索 -->
<th class="cell-control">
  <div class="input-group input-group-sm input-group-rounded">
    <span class="input-group-btn">
      <button type="submit" class="btn"><span class="icon-abui-search"></span></button>
    </span>
    <input type="text" class="form-control input-sm" placeholder="Search">
  </div>
</th>

<!-- ソート -->
<th class="table-sort">
  <span class="dsc">ソート降順</span>
</th>
<th class="table-sort table-sort-active">
  <span class="dsc">ソート降順 現在基準</span>
</th>
<th class="table-sort">
  <span class="asc">ソート昇順</span>
</th>

<!-- th内ドロップダウン -->
<th class="cell-control">
  <select name="input" class="select-block select-sm">
    <option value="0">th内ドロップダウン</option>
    <option value="1">Element1</option>
    <option value="2">Element2</option>
    <option value="3">Element3</option>
  </select>
</th>

<!-- 入力可能セル -->
<td class="cell-control">
  <input type="text" class="form-control input-sm" placeholder="入力可能セル" />
</td>

<!-- セル内カレンダー入力 -->
<td class="cell-control">
  <div class="form-group">
    <div class="input-with-icon">
      <input type="text" placeholder="入力または選択" value="2019/03/24" class="form-control input-sm" id="exampleDatepicker6" />
    </div>
    <span class="input-icon icon-abui-calendar-solid"></span>
  </div>
</td>

<!-- セル内ドロップダウン -->
<td class="cell-control">
  <select name="input" class="select-block select-sm">
    <option value="0">セル内ドロップダウン</option>
    <option value="1">Element1</option>
    <option value="2">Element2</option>
    <option value="3">Element3</option>
  </select>
</td>

<!-- セル内ボタン -->
<td class="cell-control"><button class="btn btn-primary btn-block">セル内ボタン</button></td>
<td class="cell-control"><a class="btn btn-flat-danger" href="#fakelink"><span class="icon-abui-cross"></span></a></td>

<!-- セル内ドロップダウンボタン -->
<td class="cell-control">
  <div class="btn-group btn-block">
    <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
      アクション
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#fakelink">編集</a></li>
      <li><a href="#fakelink">複製</a></li>
      <li><a href="#fakelink">削除</a></li>
    </ul>
  </div>
</td>
表組内フォームパーツの必須入力項目

表組内の入力項目にはラベルがないため、通常のもの（ラベルに「＊」付加）とは必須項目の表示が異なります。マークアップの方法は通常と同じで、包括するdiv要素に.requiredを付与します。

#table_required
      
<td>
  <div class="form-group required">
    ...
  </div>
</td>

ヘッダー追従

高さのある表組の場合、スクロールによってtheadが見えなくなると、各列が何を表しているのかわかりづらくなる場合があります。スクロールに合わせてtheadを追従させることでこれを解決できます。

#table_headerFixed
Mission Country/Agency Date of landing/impact
Luna 2 USSR 13 September 1959
Ranger 4 USA 26 April 1962
Ranger 6 USA 2 February 1964
Ranger 7 USA 31 July 1964
Ranger 8 USA 20 February 1965
Ranger 9 USA 24 March 1965
Luna 5 USSR 12 May 1965
Luna 7 USSR 7 October 1965
Luna 8 USSR 6 December 1965
Luna 9 USSR 3 February 1966
Surveyor 1 USA 2 June 1966
Surveyor 2 USA 23 September 1966
Lunar Orbiter 1 USA 29 October 1966
Luna 13 USSR 24 December 1966
Surveyor 3 USA 20 April 1967
Surveyor 4 USA 17 July 1967
Surveyor 5 USA 11 September 1967
Surveyor 6 USA 10 November 1967
Surveyor 7 USA 10 January 1968
Apollo 11 USA 20 July 1969
Luna 15 USSR 21 July 1969
Apollo 12 USA 18 November 1969
Apollo 13 USA 14 April 1970
Luna 16 USSR 20 September 1970
Luna 17/Lunokhod 1 USSR 17 November 1970
Apollo 14 USA 5 February 1971
Apollo 15 USA 30 July 1971
Luna 18 USSR 11 September 1971
Luna 20 USSR 21 February 1972
Apollo 16 USA 21 April 1972
Apollo 17 USA 7 December 1972
Luna 21/Lunokhod 2 USSR 8 January 1973
Luna 23 USSR 6 November 1974
Luna 24 USSR 18 August 1976
Hiten Japan 10 April 1993
Lunar Prospector USA 31 July 1999
SMART-1 ESA 3 September 2006
Chandrayaan-1 Moon Impact Probe ISRO 14 November 2008
SELENE Rstar (Okina) Japan 12 February 2009
Chang'e 1 China 1 March 2009
Kaguya Japan 10 June 2009
LCROSS(Centaur) USA 9 October 2009
LCROSS (Shepherding Spacecraft) USA 9 October 2009
Chang'e 3 China 14 December 2013

実装するには下記のようにマークアップします。thを<thead></thead>で、その他の行を<tbody></tbody>で括ります。

<table class="table">
<thead>
<tr>
  <th>Mission</th>
  <th>Country/Agency</th>
  <th>Date of landing/impact</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Luna 2</td>
  <td>USSR</td>
  <td>13 September 1959</td>
</tr>
...
</tbody>
</table>

マークアップが完了したら、下記のように実行します。

オプション指定をすることにより、位置などを変更することが可能です。用意されているオプションや設定方法に関する詳しい情報は、プラグインのリソースを参照してください。

var headerHeight = $('#header-site.navbar-fixed-top').height() + $('#header-content.navbar-fixed-top').height(); // 固定ヘッダーの高さを算出
$('table').floatThead({
top: headerHeight
});

ヘッダー、カラムの固定

テーブルのヘッダーや先頭・末尾のカラムを固定できます。

列固定、行固定を行う場合、<tbody>（データ部分）内においてrowspan, colspanは利用できません。セルの結合がどうしても必要になる場合は、プロジェクト独自のコンポーネントとして、別途用意してください。 rowspan, colspanは、<thead>（ヘッダー部分）でのみ利用可能です。

#table_headerColumnFixed
大分類 中分類 小分類 メーカー メーカー品番 商品名 サブクラス1 サブクラス2 商品展開年 シーズン タグ種別 再承認 承認状態 運用開始日 運用終了日 更新者 更新日  
0：インドア 0：食品 ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 1：ファブリック ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 2：インテリア小物 ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 秋冬 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 3：キッチンウエア ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 4：室内履き ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 5：家庭用品 ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 6：収納用品 ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 7：アウトドア ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 8：オモチャ ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14
0：インドア 9：その他 ルームソックス 0014:取引先14 MK00010943 商品001 121:サブクラス１121 121:サブクラス２121 2010年 オールシーズン 上代ありタグ   01:一時保存 2015/01/14 2017/02/14 移行 2015/02/14

まず、tableを組み立てます。この時、<tbody>内でrowspan, colspanを使用するとエラーになります。

HTML
<table class="table table-bordered table-striped table-hover table-checkablerow" id="table--fixed">
  <thead>
    <tr>
      <th class="cell-control">
        <label class="checkbox no-label" for="table-fixed-col-row-fixed-nospan__cb1">
        <input type="checkbox" value="" id="table-fixed-col-row-fixed-nospan__cb1" data-toggle="checkbox">
        </label>
      </th>
      <th>大分類</th>
      <th>中分類</th>
      <th>小分類</th>
      <th>メーカー</th>
      <th>メーカー品番</th>
      <th>商品名</th>
      <th>サブクラス1</th>
      <th>サブクラス2</th>
      <th>商品展開年</th>
      <th>シーズン</th>
      <th>タグ種別</th>
      <th>再承認</th>
      <th>承認状態</th>
      <th>運用開始日</th>
      <th>運用終了日</th>
      <th>更新者</th>
      <th>更新日</th>
      <th>&ensp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell-control">
        <label class="checkbox no-label" for="table-fixed-col-row-fixed-nospan__cb2">
          <input type="checkbox" value="" id="table-fixed-col-row-fixed-nospan__cb2" data-toggle="checkbox">
        </label>
      </td>
      <td>0：インドア</td>
      <td>0：食品</td>
      <td>ルームソックス</td>
      <td>0014:取引先14</td>
      <td>MK00010943</td>
      <td>商品001</td>
      <td>121:サブクラス１121</td>
      <td>121:サブクラス２121</td>
      <td>2010年</td>
      <td>オールシーズン</td>
      <td>上代ありタグ</td>
      <td>&ensp;</td>
      <td>01:一時保存</td>
      <td>2015/01/14</td>
      <td>2017/02/14</td>
      <td>移行</td>
      <td>2015/02/14</td>
      <td class="cell-control"><a class="btn btn-flat-primary btn-sm"><span class="icon-abui-pencil"></span></a></td>
    </tr>
    <tr>
      <td class="cell-control">
        <label class="checkbox no-label" for="table-fixed-col-row-fixed-nospan__cb3">
          <input type="checkbox" value="" id="table-fixed-col-row-fixed-nospan__cb3" data-toggle="checkbox">
        </label>
      </td>
      <td>0：インドア</td>
      <td>1：ファブリック</td>
      <td>ルームソックス</td>
      <td>0014:取引先14</td>
      <td>MK00010943</td>
      <td>商品001</td>
      <td>121:サブクラス１121</td>
      <td>121:サブクラス２121</td>
      <td>2010年</td>
      <td>オールシーズン</td>
      <td>上代ありタグ</td>
      <td>&ensp;</td>
      <td>01:一時保存</td>
      <td>2015/01/14</td>
      <td>2017/02/14</td>
      <td>移行</td>
      <td>2015/02/14</td>
      <td class="cell-control"><a class="btn btn-flat-primary btn-sm"><span class="icon-abui-pencil"></span></a></td>
    </tr>

    ...

  </tbody>
</table>

tableを通常通りマークアップした後、下記のjsを定義します。

jQuery
$(function(){
  $('#table--fixed').initTable({
    fixedColumns: {
      leftColumns: 4,
      rightColumns: 1
    },
    tableHeight: "300px",
    width: [
      { width: 120, targets: 1 },
      { width: 120, targets: 2 },
      { width: 120, targets: 3 },
      { width: 140, targets: 4 },
      { width: 140, targets: 5 },
      { width: 160, targets: 6 },
      { width: 160, targets: 7 },
      { width: 80,  targets: 8 },
      { width: 120, targets: 9 },
      { width: 120, targets: 10 },
      { width: 80,  targets: 11 },
      { width: 100, targets: 12 },
      { width: 100, targets: 13 },
      { width: 100, targets: 14 },
      { width: 100, targets: 15 },
      { width: 100, targets: 16 },
      { width: 100, targets: 17 },
      { width: 30,  targets: 18 },
    ],
  });
});
オプション
キー 形式 指定方法  
fixedColumns.leftColumns <number> 0以上 先頭カラムからいくつ固定するか。0を指定時は固定なし。
fixedColumns.rightColumns <number> 0以上 最後のカラムからいくつ固定するか。0を指定時は固定なし。
tableHeight <string> "~px"。
指定しなければテーブルの高さはなりゆきになり、行ヘッダーの固定が解除されます。		 テーブルの高さ
width [{ width: <number>, targets: <number> }] targetsに、先端カラムから数えたカラムのインデックスを指定。widthに、幅を指定（pxは省略する）。
必須。作成する全てのカラムに対して、幅を指定すること。		 セルの幅
thead内でrowspan、colspanを指定する

前述の通り、<thead>内ではrowspan, colspanを利用することができます。

#table_theadAttr
  期間 計 2017年 2018年
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
プロジェクト1 2014/8/31 - 2015/7/30 54300
HTML
<table class="table table-bordered table-striped table-hover" id="table--fixed-with-header-span">
  <thead>
    <tr>
      <th rowspan="2"></th>
      <th rowspan="2">期間</th>
      <th rowspan="2">計</th>
      <th colspan="12">2017年</th>
      <th colspan="12">2018年</th>
    </tr>
    <tr>
      <th>1月</th>
      <th>2月</th>
      <th>3月</th>
      <th>4月</th>
      <th>5月</th>
      <th>6月</th>
      <th>7月</th>
      <th>8月</th>
      <th>9月</th>
      <th>10月</th>
      <th>11月</th>
      <th>12月</th>
      <th>1月</th>
      <th>2月</th>
      <th>3月</th>
      <th>4月</th>
      <th>5月</th>
      <th>6月</th>
      <th>7月</th>
      <th>8月</th>
      <th>9月</th>
      <th>10月</th>
      <th>11月</th>
      <th>12月</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>プロジェクト1</td>
      <td>2014/8/31 - 2015/7/30</td>
      <td>54300</td>
      <td class="cell-control"><input type="text" class="form-control" placeholder=" " /></td>
      ...
    </tr>
  </tbody>
</table>

行アコーディオン

行を折りたたんでおくことができます。

#table_theadAttr
    2015年度 2016年度 2017年度 2018年度 2019年度 2020年度 2021年度 2022年度 2023年度 2024年度 2025年度 2026年度
日本 売上高
売上高
売上高
韓国 売上高
売上高
売上高

行アコーディオンを実装する場合は、下記を指定することはできません。

  • テーブルの高さの指定（テーブル高さは全てなりゆきです）
  • table-checkablerow
  • table-stripe
  • table-bordered

どうしても必要になる場合は、プロジェクト独自のコンポーネントとして、別途用意してください。

まず<table>に、.table-row-collapseクラスをつけます。

<table class="table table-bordered table-hover table-row-collapse" id="table--row-collapse">
</table>

<tbody>内<tr>要素に、data-rowgroup属性をつけます。指定する文字列に制限はありませんが、グループ化したい<tr>に同じグループ名をつけてください。
同じグループ名を指定した<tr>同士は、必ず連続して指定してください。group1の後にgroup2を指定し、その後にまたgroup1を指定する、といったマークアップだと正常に動作しません。注意してください。

<table class="table table-bordered table-hover table-row-collapse" id="table--row-collapse">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <tr data-rowgroup="1"></tr>
    <tr data-rowgroup="1"></tr>
    <tr data-rowgroup="1"></tr>
    <tr data-rowgroup="2"></tr>
    <tr data-rowgroup="2"></tr>
    <tr data-rowgroup="2"></tr>
  </tbody>
</table>

行の開閉のトリガーとなる要素に、

  • data-toggle="table-row"
  • data-target=""
  • data-collapsed="true"

を指定します。data-target属性には、ターゲットのグループ名を指定します。
data-collapsed属性にtrueを指定した場合は、画面ロード時にそのグループのアコーディオンが閉じられた状態になり、falseを指定するとその逆になります。

<table class="table table-bordered table-hover table-row-collapse" id="table--row-collapse">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <tr data-rowgroup="1">
      <td style=""><a href="#fakelink" data-toggle="table-row" data-target="1" data-collapsed="true"><span class="icon icon-abui-arrow-down prx"></span>日本</a></td>
    </tr>
    <tr data-rowgroup="1">
    </tr>
    <tr data-rowgroup="1">
    </tr>
    <tr data-rowgroup="2">
      <td style=""><a href="#fakelink" data-toggle="table-row" data-target="2" data-collapsed="true"><span class="icon icon-abui-arrow-down prx"></span>韓国</a></td>
    </tr>
    <tr data-rowgroup="2">
    </tr>
    <tr data-rowgroup="2">
    </tr>
  </tbody>
</table>

あとは、通常通りテーブルを組み立てていきます。繰り返しになりますが、colspan, rowspanは使えません。

HTML
<table class="table table-bordered table-hover table-row-collapse" id="table--row-collapse">
  <thead>
    <tr>
      <th>&ensp;</th>
      <th>&ensp;</th>
      <th>2015年度</th>
      <th>2016年度</th>
      <th>2017年度</th>
      <th>2018年度</th>
      <th>2019年度</th>
      <th>2020年度</th>
      <th>2021年度</th>
      <th>2022年度</th>
      <th>2023年度</th>
      <th>2024年度</th>
      <th>2025年度</th>
      <th>2026年度</th>
    </tr>
  </thead>
  <tbody>
    <tr data-rowgroup="1">
      <td style=""><a href="#fakelink" data-toggle="table-row" data-target="1" data-collapsed="true"><span class="icon icon-abui-arrow-down prx"></span>日本</a></td>
      <td>売上高</td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
    </tr>
    <tr data-rowgroup="1">
      <td style=""></td>
      <td>売上高</td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
    </tr>
    <tr data-rowgroup="1">
      <td></td>
      <td>売上高</td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
      <td class="cell-control"><input type="text" class="form-control" placeholder="0" /></td>
    </tr>
    <tr data-rowgroup="2">
      省略...
    </tr>
  </tbody>
</table>

最後にjsを追加します。オプション指定については、前述の通りです。

jQuery
$(function(){
  $('#table--row-collapse').initTable({
    fixedColumns: {
      leftColumns: 2,
      rightColumns: 0
    },
    tableHeight: "",
    width: [
      { width: 150, targets: 0 },
      { width: 150, targets: 1 },
      { width: 80, targets: 2 },
      { width: 80, targets: 3 },
      { width: 80, targets: 4 },
      { width: 80, targets: 5 },
      { width: 80, targets: 6 },
      { width: 80, targets: 7 },
      { width: 80, targets: 8 },
      { width: 80, targets: 9 },
      { width: 80, targets: 10 },
      { width: 80, targets: 11 },
      { width: 80, targets: 12 },
      { width: 80, targets: 13 },
    ],
  });
});