テーブルのレイアウトを固定か自動か指定するtable-layoutプロパティ
table-layout

　table-layoutプロパティは、テーブル（<table>要素）をレイアウトする際に、「固定レイアウト」「自動レイアウト」のいずれを用いるかを指定します。

基本データ

構文 セレクタ{table-layout: 値;}
継承 ×
値
auto、fixed
　
親から継承させる場合
inherit
効果 テーブルレイアウトの際に、固定テーブルレイアウトアルゴリズム、自動テーブルレイアウトアルゴリズムを用いるかを指定
初期値 auto
適用個所 テーブルもしくはインラインテーブル要素（<table>要素）

例：

野菜の価格表1
キャベツ100円長野
長ネギ50円埼玉

野菜の価格表2
キャベツ100円長野
長ネギ50円埼玉

caption {
table-layout : bottom ;
font-size : 1.7em ;
}

  <table>
    <caption>野菜の価格表</caption>

    <thead>
      <tr>
        <th>野菜</th><th>値段</th><th>産地</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>野菜</th><th>値段</th><th>産地</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>キャベツ</td><td>100円</td><td>長野</td>
      </tr>
      <tr>
        <td>長ネギ</td><td>50円</td><td>埼玉</td>
      </tr>
    </tbody>

  </table>

動作Webブラウザ

Internet Explorer IE 8以上
Firefox Firefox 1以上
SafariSafari 1.3以上
Opera Opera 9.2以上
ChromeChrome 2以上
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("ID属性値").style.captionSide

jQueryを使った参照方法

$('【セレクタ】').css('table-layout','【値】');
$('【セレクタ】').css({'table-layout':【値】'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT