table-layout

InternetExplorer独自のプロパティで、表の表示方法を指定します。


ブラウザ

IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / Fx1 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ table-layout : 値; }

▲PageTop

指定できる値

値 初期値 意味
auto ○ 全てのセルの必要サイズを調べてから、表全体のサイズを決定します。セルサイズの最適化が図れますが、表の表示速度が低下します。
fixed 1行目のセルサイズを2行目以降のセルサイズに適用します。表の表示速度は向上しますが、2行目以降は、データ量に対して、セルサイズが不釣合になる可能性があります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        table-layout : auto;
      }
      #sample2 {
        table-layout : fixed;
      }
      #sample table {
        width : 100%;
      }
      #sample th {
        background-color : pink;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <table id="sample1" border="1">
        <caption>【table-layout : auto】を指定</caption>
        <tr>
          <th>値</th>
          <th>意味</th>
          <th>メリット</th>
          <th>デメリット</th>
        </tr>
        <tr>
          <td>auto</td>
          <td>全てのセルの必要サイズを調べてから、表全体のサイズを決定します。</td>
          <td>全行にわたって最適化されたセルサイズで表示されます。</td>
          <td>表の表示スピードが遅くなります。</td>
        </tr>
        <tr>
          <td>fixed</td>
          <td>1行目のセルサイズを2行目以降のセルサイズに適用します。</td>
          <td>表の表示スピードが早くなります。</td>
          <td>1行目でサイズが決定されるため、2行目以降のデータ量とセルサイズが不釣合いになる可能性があります。</td>
        </tr>
      </table>
      <br>
      <table id="sample2" border="1">
        <caption>【table-layout : fixed】を指定</caption>
        <tr>
          <th>値</th>
          <th>意味</th>
          <th>メリット</th>
          <th>デメリット</th>
        </tr>
        <tr>
          <td>auto</td>
          <td>全てのセルの必要サイズを調べてから、表全体のサイズを決定します。</td>
          <td>全行にわたって最適化されたセルサイズで表示されます。</td>
          <td>表の表示スピードが遅くなります。</td>
        </tr>
        <tr>
          <td>fixed</td>
          <td>1行目のセルサイズを2行目以降のセルサイズに適用します。</td>
          <td>表の表示スピードが早くなります。</td>
          <td>1行目でサイズが決定されるため、2行目以降のデータ量とセルサイズが不釣合いになる可能性があります。</td>
        </tr>
      </table>
    </div>
  </body>
</html>

表示結果

【table-layout : auto】を指定
値 意味 メリット デメリット
auto 全てのセルの必要サイズを調べてから、表全体のサイズを決定します。 全行にわたって最適化されたセルサイズで表示されます。 表の表示スピードが遅くなります。
fixed 1行目のセルサイズを2行目以降のセルサイズに適用します。 表の表示スピードが早くなります。 1行目でサイズが決定されるため、2行目以降のデータ量とセルサイズが不釣合いになる可能性があります。

【table-layout : fixed】を指定
値 意味 メリット デメリット
auto 全てのセルの必要サイズを調べてから、表全体のサイズを決定します。 全行にわたって最適化されたセルサイズで表示されます。 表の表示スピードが遅くなります。
fixed 1行目のセルサイズを2行目以降のセルサイズに適用します。 表の表示スピードが早くなります。 1行目でサイズが決定されるため、2行目以降のデータ量とセルサイズが不釣合いになる可能性があります。

▲PageTop

関連項目

HTML

<table>

▲PageTop

▲