【初心者向け】Tabulatorでテーブルを全幅表示する方法｜layoutオプション徹底解説

「Tabulatorで作った表が画面いっぱいに広がらない」
「スマホで見ると崩れてしまう」——そんな悩みを抱えていませんか？

この記事では、Tabulatorでテーブルを全幅表示する方法を、初心者でも理解できるように丁寧に解説します。
さらに、layoutオプションの違いや、実務でよく使う設定のコツも紹介します。

Tabulatorで全幅表示が必要な理由

Tabulatorを使うと、表形式のデータをきれいに表示できます。
しかし、デフォルトでは列幅が固定され、画面いっぱいに広がらないことがあります。
これではせっかくの表が見にくく、スマホやタブレットではさらに読みにくくなってしまいます。全幅表示を設定することで、どのデバイスでも見やすいレイアウトになります。

基本の設定方法（CSS＋JavaScript）

まずは最もシンプルなコード例です。

<div id="example-table"></div>

<script>
var table = new Tabulator("#example-table", {
  layout: "fitColumns", // 列幅を自動調整
  columns: [
    {title:"Name", field:"name"},
    {title:"Age", field:"age"},
    {title:"Job", field:"job"},
  ],
  data:[
    {name:"田中太郎", age:28, job:"Engineer"},
    {name:"鈴木花子", age:34, job:"Designer"},
  ]
});
</script>

<style>
#example-table {
  width: 100%; /* 全幅表示 */
}
</style>

See the Pen Tabulatorサンプル-テーブル全幅（fitColumns） by yuichi (@yhamada1205) on CodePen.

---

layoutオプションの種類と違い

Tabulatorには、幅調整を制御するlayoutオプションがいくつか用意されています。

オプション	特徴	向いているケース
fitColumns	全体幅に合わせて列を均等に広げる	一覧表、レスポンシブ対応
fitData	データ幅に合わせる	内容量が少ない場合
fitDataFill	データ幅に合わせつつ空きがあれば拡張	柔軟に対応したい場合
fitDataStretch	すべての列をデータ幅に合わせて均等に広げる	バランスを重視

学生や初心者の方は「fitColumns」から始めるのがおすすめです。

---

実務で役立つ補足設定

• 親要素の幅指定
  親のdivが固定幅だと、width:100%を指定しても全幅表示になりません。
  必ず親要素にも柔軟な幅指定をしましょう。
• スクロール対応
  列が多い場合は横スクロールが必要になります。
  その際は以下を指定します。
  #example-table { overflow-x: auto; }

---

よくある質問（FAQ）

---

まとめ

Tabulatorで全幅表示するには、CSSでwidth:100%を指定し、JavaScriptでlayout:"fitColumns"を設定するのが基本です。
オプションの違いを理解すれば、さらに柔軟にカスタマイズできます。
次はソートやページング、レスポンシブ機能を試してみると、実務でも使える表が作れるようになります。