style.tableLayoutプロパティ

投稿日: 2013年11月15日 作成者: alphasis

style.tableLayoutは、要素のスタイル属性のtable-layoutプロパティの値を取得、もしくは、設定するプロパティ。

table-layoutプロパティは、表（テーブル）の列の幅を自動調整するかどうかを指定することができる。

構文

取得

var $tableLayout = $elementReference.style.tableLayout;

戻り値

要素のスタイル属性のtable-layoutプロパティの値。

設定

$elementReference.style.tableLayout = "auto | fixed | inherit";
auto | fixed | inherit
下記の何れかの値で指定する。初期設定値は「auto」。
  • auto：列の幅を自動調整する。自動テーブルレイアウトアルゴリズム。
  • fixed：列の幅を自動調整しないで固定する。固定テーブルレイアウトアルゴリズム。
  • inherit：親要素の設定を継承。

サンプル


サンプルのtable-layoutプロパティの値：

セルＡ１ セルＢ１　セルＢ１　セルＢ１ セルＣ１
セルＡ２　セルＡ２ セルＢ２ セルＣ２
セルＡ３ セルＢ３　セルＢ３ セルＣ３

サンプルの動作について

  • 「auto」ボタンをクリックすると、列の幅を自動調整する。「サンプルのtable-layoutプロパティの値：」の右横に「auto」と表示。
  • 「fixed」ボタンをクリックすると、列の幅を自動調整しない。「サンプルのtable-layoutプロパティの値：」の右横に「fixed」と表示。
  • 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのtable-layoutプロパティの値：」の右横に「inherit」と表示。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setTableLayout( $tableLayout ) {
 var $element = document.getElementById( "sample" );
 $element.style.tableLayout = $tableLayout;
 var $tableLayout = $element.style.tableLayout;
 document.getElementById( "sampleOutput" ).innerHTML = $tableLayout;
}
</script>

HTML

<button onclick="setTableLayout('auto');">auto</button>
<button onclick="setTableLayout('fixed');">fixed</button>
<button onclick="setTableLayout('inherit');">inherit</button>
<br />
<p>サンプルのtable-layoutプロパティの値：<span id="sampleOutput"></span></p>
<table id="sample">
 <tr>
  <td>セルＡ１</td>
  <td>セルＢ１　セルＢ１　セルＢ１</td>
  <td>セルＣ１</td>
 </tr>
 <tr>
  <td>セルＡ２　セルＡ２</td>
  <td>セルＢ２</td>
  <td>セルＣ２</td>
 </tr>
 <tr>
  <td>セルＡ３</td>
  <td>セルＢ３　セルＢ３</td>
  <td>セルＣ３</td>
 </tr>
</table>

CSS

<style>
#sample,
#sample td {
 border: 2px solid red;
 background-color: yellow;
 padding: 6px 10px;
}
#sample {
 width: 500px;
 margin: 10px;
 padding: 0;
 border-collapse: separate;
 border-spacing: 10px;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テーブル, プロパティ, リファレンス パーマリンク