2011年07月06日

table-layoutプロパティ CSS テーブル

スポンサード リンク

 テーブルの列の幅を均等に割り振る
table-layout:fixed;プロパティ

No 画像 背景設定 テーブル
1 ドラッグ 背景画像設置 表の作成
2 ローテーションバーナー 背景 CSS 表題を固定

No 画像 背景設定 テーブル
1 ドラッグ 背景画像設置 表の作成
2 ローテーションバーナー 背景 CSS 表題を固定

上の表はtable-layout:auto; 自動レイアウトにする(初期値)
下の表はtable-layout:fixed; 固定レイアウトにするを
   指定しています。列幅が均等になっています。
   ただし一列目は幅を指定しているのでその値の幅!width="20"

チカッパプラン 詳細はこちら

サンプルソース

<html>
 <head>
  <title>table-layoutプロパティ CSS テーブル</title>
<style type="text/css">
  .Tbl{
    table-layout: fixed; /* 固定レイアウト*/
    border-collapse:collapse; /* 隣接する枠線を重ねる */
    width: 520px; /* 表の横幅:520ピクセル */
  }

  #Auto{
   table-layout: auto; /* 自動レイアウト*/
  }

 .Tbl td,th{
   border: 1px solid green; /* 枠線:1px,実線,緑色 */
   padding:2px; /* 内側余白 */
  }
</style>
</head>
<body>
 <table class="Tbl" id="Auto">
<tbody>
  <tr>
   <th>No</th>
   <th>画像</th>
   <th>背景設定</th>
   <th>テーブル</th>
 </tr>
 <tr>
  <td>1</td>
  <td>ドラッグ</td>
  <td>背景画像設置</td>
  <td>表の作成</td>
 </tr>
 <tr>
  <td>2</td>
  <td>ローテーションバーナー</td>
  <td>背景 CSS</td>
  <td>表題を固定</td>
</tr>
</tbody>
</table>
<br>
<table class="Tbl">
<tbody>
<tr>
 <th width="20">No</th>
 <th>画像</th>
 <th>背景設定</th>
 <th>テーブル</th>
</tr>
<tr>
 <td>1</td>
 <td>ドラッグ</td>
 <td>背景画像設置</td>
 <td>表の作成</td>
</tr>
<tr>
 <td>2</td>
 <td>ローテーションバーナー</td>
 <td>背景 CSS</td>
 <td>表題を固定</td>
</tr>
</tbody>
 </table>
  </body>
   </html>

table-layoutプロパティ
table-layout:auto;
  テーブル(表)の列幅を自動レイアウトにします。これが初期値で
      セル内に書かれた内容により自動で各列の幅が決定されます。

table-layout:fixed;
  表全体の幅に応じて各列の幅が均等になります。
   ある列(セル)にwidthプロパティ(幅指定)があればそれを除く
       各列の幅が均等になります。

さくらのレンタルサーバ スタンダード
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。 javascript
テーブルの行の文字色,背景色を変えてハイライトします。
サーバーカウボーイ



posted by javaScript at 16:03 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。