No.3ベストアンサー
- 回答日時:
最近のInternet Explorerに限れば次のようにできます。
<html>
<head>
<title>テーブルのデータ部分をスクロールするようにするテスト</title>
<style>
<!--
table { border-collapse: collapse; }
.tHeader, .tBody { border: 1px solid black; float: left; }
.tHeader { border-bottom: 0px; }
.tBody { height: 40px; overflow-y: scroll; clear: left; border-top: 0px; }
.tSample th { background-color: silver; border: 1px solid black; }
.tSample td { border: 1px solid silver; }
.tSample colgroup { word-break: break-all; }
.c1 { width: 2em; text-align: right; }
.c2 { width: 4em; }
.c3 { width: 4em; }
.c4 { width: 10em; }
br.clear { clear: both; }
-->
</style>
</head>
<body>
<div class="tSample">
<div class="tHeader">
<table>
<colgroup class="c1"></colgroup>
<colgroup class="c2"></colgroup>
<colgroup class="c3"></colgroup>
<colgroup class="c4"></colgroup>
<tr><th></th><th>A</th><th>B</th><th>C</th></tr>
</table>
</div>
<div class="tBody">
<table>
<colgroup class="c1"></colgroup>
<colgroup class="c2"></colgroup>
<colgroup class="c3"></colgroup>
<colgroup class="c4"></colgroup>
<tr><th>1</th><td>北海道</td><td>札幌</td><td>ラーメン</td></tr>
<tr><th>2</th><td>青森</td><td>青森</td><td>りんご</td></tr>
<tr><th>3</th><td>岩手</td><td>盛岡</td><td>わんこそば</td></tr>
<tr><th>4</th><td>宮城</td><td>仙台</td><td>笹かま</td></tr>
<tr><th>5</th><td>福島</td><td>福島</td><td>輪箱飯</td></tr>
</table>
</div>
</div>
<br class="clear" />
</body>
</html>
ヘッダ部とデータ部をdivで囲って,データ部をoverflow-y: scrollでスクロールできるようにしています。
ヘッダ部とデータ部で同じ<colgroup class="??">を記述して列の幅が等しくなるようにしています。
No.2
- 回答日時:
インラインフレームを使えばそれっぽくは見えますが。
基.htm
<table border="1">
<tr><th width="200px">項目1</th><th width="600px">項目2</th></tr>
</table>
<iframe src="data.htm" width="800px" height="400px" frameborder="0">
</iframe>
data.htm
<html>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<table border="1">
<tr><td width="200px">項目1</td><td width="600px">項目2</td></tr>
</table>
</body>
</html>
こんな感じ。
文字の大きさとかで崩れちゃったりもするので、あんまり期待はしないほうが良いかもです。
あ、このHTMLは即興なので、設定は出来ればちゃんとID、CSSで。
No.1
- 回答日時:
なにかしらの手段があるかもしれませんが、
素直に考えると基本的には出来ないと思います。
理由は、最初以外の TR を1つのまとまりとして扱えないみたいだからです。
なんとか修飾を用いて個々の TR, TD を同一視する事は出来るのですが。
唯一、テーブル自体を DIV 等でひとまとめには出来るので、
<div>
<table border="1">
<caption></caption>
<tbody>
<tr><th>TEST00A</th><th>TEST00B</th><th>xx</th></tr>
<tr><td colspan="3">
<div style="height:3em;overflow:scroll;">
<table border="1">
<caption></caption>
<tbody>
<tr><th colspan="2"></th></tr>
<tr><td>test01a</td><td>test01b</td></tr>
<tr><td>test02a</td><td>test02b</td></tr>
</tbody>
</table>
</div>
</td></tr>
</tbody>
</table>
</div>
上記の考え方で、後はセルの幅を固定すれば(フレーム分割と同じ発想)なんとか・・・。
フレームではないですが、スタイルシートを使っているという点が少々配慮のいる処で・・・。
尚、スタイルシートは出来れば ID,CLASS 指定を用いて
HTML とは分離する事をお勧めし、
且つ外部ファイルにする事もお勧めしますが、
それはまた別の知識であり・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
DreamWeaverで複数ワードを一気...
-
CSSだけで<table>の<td>や<tr>...
-
チェックボックスが複数チェッ...
-
HTMLで文とテーブルの間が空く。
-
tableでcolspanを使うと次行以...
-
表の中の列の順番を入れ替える...
-
tableの中で<p>タグを使うと…
-
表の一部を結合するには?
-
テーブルの表示がずれます
-
widthを指定しない<td>が幅をシ...
-
テーブル(表)を2つ横に並べて...
-
テーブルの装飾
-
Safariでテーブルのセルの高さ...
-
HTMLのrowspan
-
[CSS] tableの行の間隔をあける
-
Htmlのtd要素の中で半角の空...
-
テーブルの列幅を固定にしたい
-
テーブルのセルに画像をピッタ...
-
nowrapを指定しても改行される...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報