
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を探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
表の中の列の順番を入れ替える...
-
テーブルの任意の列を非表示に...
-
ASP GridViewで1レコード2行を...
-
テーブルの行を折りたたみたい...
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
ホームページ 表の上の余白を...
-
EXCELからhtmlへの変換で罫線が...
-
テーブルの線を立体じゃなく普...
-
逆L字の表(table)組み
-
トーナメント表の製作
-
htmlのtable内に画像
-
HTMLで文とテーブルの間が空く。
-
テーブルの装飾
-
tableでレイアウトが崩れる場合
-
CSSだけで<table>の<td>や<tr>...
-
中に<table></table>が使えるア...
-
nth-childをtrとtdに同時に使う...
-
テーブル入れ子した時の、テー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
テーブルのセルに画像をピッタ...
-
TRタグの余白をcssで設定するには
-
中に<table></table>が使えるア...
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
tableにul,または,olを入れられ...
-
ホームページ 表の上の余白を...
-
文字列が入っているtdを削除せ...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
EXCELからhtmlへの変換で罫線が...
-
逆L字の表(table)組み
-
値が0なら非表示にしたい
-
CSSだけで<table>の<td>や<tr>...
-
テーブルの外側の線を消す
-
HTMLで文とテーブルの間が空く。
-
表(テーブル)内の文字サイズ...
おすすめ情報