CSS3: table-layout プロパティ - テーブル(表)の表示方法

■ 概要

項  目説  明
記述形式 セレクタ {table-layout: }
値 の形式 autofixedinherit
初 期 値 auto
対応ブラウザー C2+ / e5+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 <table>
継  承 しない

■ 解説

table-layoutプロパティ は,テーブル(表)の表示方法を指定 します。

指定できる値の形式は,以下のとおりです。

説  明
auto セルの幅や高さ等の自動調整を行う表示方法を使用します。 (初期値)
fixed セルの幅や高さ等はユーザーの指定どおりに固定して表示します。
inherit 親要素の設定を継承します。

■ 使用例(  table-layout プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
 table{
   border-width: 1px;
   border-style: solid;
   border-collapse: separate;
   width: 400px;
 }
 #tb_auto{
   table-layout: auto;
   margin-bottom: 20px;
 }
 #tb_fixed{
   table-layout: fixed;
 }
 tr, th, td{
   border-width:1px;
   border-style: solid;
 }
 th{
   width: 5%;
 }
-->
</style>
HTML
<body> ~ </body>
  <table id="tb_auto">
    <caption>例1. table-layout プロパティが <b>auto</b> の場合</caption>
    <tr>
      <th>値の形式</th>
      <td><b>top</b> | <b>bottom</b> | <b>inherit</b></td>
    </tr>
    <tr>
      <th>初期値</th>
      <td><b>top</b></td>
    </tr>
  </table>
  <table id="tb_fixed">
    <caption>例2. table-layout プロパティが <b>fixed</b> の場合</caption>
    <tr>
      <th>値の形式</th>
      <td><b>top</b> | <b>bottom</b> | <b>inherit</b></td>
    </tr>
    <tr>
      <th>初期値</th>
      <td><b>top</b></td>
    </tr>
  </table>

ブラウザー 表示例
例1. table-layout プロパティが auto の場合
値の形式 top | bottom | inherit
初期値 top
例2. table-layout プロパティが fixed の場合
値の形式 top | bottom | inherit
初期値 top

■ 備考

【参考ページ】