【初月無料キャンペーン中】gooドクター

ヘッダとボディの幅を可変にし、かつズレないようにするにはどうすればよいのでしょうか?

「テーブルのヘッダとボディの幅がズレルのを」の質問画像
gooドクター

A 回答 (2件)

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。



 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTMLやスタイルシートの目的とかけ離れています。使うならabsoluteでしょう。

 しかし、floatやabsolute、fixedは、他の要素から完全に切り離されますから、列のセル幅を引き継げません。tableの描画ルーチンに従わなくなります。

 もう一点、tableの扱いはブラウザごとに大きな差があります。また根本的な問題として、tableには他のブロック要素に使えるプロパティが使えません。height/overflowなど・・

 そのような表を作成される場合は、table,thead,tfoot,tr,tdの各要素をblock要素に置き換えて、幅をセルごとにきちんと指定して配置するのが無難です。

_<table class="scroll" summary="scrollTbody">
__<thead>
___<tr>
____<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th>
___</tr>
__</thead>
__<tbody>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>い</td><td>き</td><td>し</td><td>ち</td>
___</tr>
___<tr>
____<td>う</td><td>く</td><td>す</td><td>つ</td>
___</tr>
___<tr>
____<td>え</td><td>け</td><td>せ</td><td>て</td>
___</tr>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>い</td><td>き</td><td>し</td><td>ち</td>
___</tr>
___<tr>
____<td>う</td><td>く</td><td>す</td><td>つ</td>
___</tr>
___<tr>
____<td>え</td><td>け</td><td>せ</td><td>て</td>
___</tr>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
__</tbody>
_</table>
に対して
table.scroll,table.scroll *{display:block;margin: 0;padding:0;line-height:30px;}
table.scroll{width:428px;margin-top:50px;border-bottom:1px solid gray;}
table.scroll thead,table.scroll tbody{width:100%;border:none;}
table.scroll tbody{height:94px;overflow:auto;width:428px;}
table.scroll thead th,table.scroll tbody td{float:left;width:100px;border:solid gray 1px;}
/* 本来はfloatではなくdisplay:inline-blockとすべきだが後方互換のためやむなくfloat */
table.scroll tbody,table.scroll tbody tr{clear:left;}
    • good
    • 1
この回答へのお礼

ご回答頂き、ありがとう御座います。

お礼日時:2012/06/27 11:48

なぜずれるのですか?


<table summary="sample">
 <caption>テーブルヘッダ、フッタ、本文</caption>
 <thead><!-- ヘッダ -->
  <tr>
   <th abbr="number">No.</th><th abbr="code">code</th>・・・・・・・・</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th abbr="number">No.</th><th abbr="code">code</th>・・・・・・・・</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>0001</td><td>feko-001</td>・・・・・</td>
  </tr>
  <tr>
   <td>0001</td><td>feko-001</td>・・・・・</td>
  </tr>
  <tr>
   <td>0001</td><td>feko-001</td>・・・・・</td>
  </tr>
 </tbody>
</table>

この回答への補足

テーブルのスクロール時、ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

補足日時:2012/06/15 08:39
    • good
    • 0
この回答へのお礼

ご回答頂き、ありがとうございます。

お礼日時:2012/06/15 08:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング