人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML・Javascriptの質問です。

データをテーブルで表示したいと考えているのですが、横に長くなるとブラウザのスクロールバーが出てしまい視認性が落ちてしまいます。そこでテーブルのデータ部分だけをインラインフレームのように扱えないかと調べています。具体的には、テーブルの一番左側の列をヘッド(タイトル)として固定して、2列目以降をブラウザのスクロールバーを出さない形でスクロール可能な状態にしたいのですが、何か良い方法はないでしょうか?

※FLASHは使えません。

●質問者: southgate_01
●カテゴリ:インターネット ウェブ制作
✍キーワード:FLASH HTML JavaScript インラインフレーム スクロール
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ku__ra__ge
●80ポイント ベストアンサー

テーブルの一部をスクロール表示させたい場合、

実際には2つのテーブルとして作成して、スクロールさせたい部分を

overflow:auto を指定した要素で囲んでやるとよいです。

以下にサンプルを示します。

<div id="scroll-table">

<table border=1 style="float:left;">
 <tr>
 <th>header1</th>
 </tr>
 <tr>
 <th>header2</th>
 </tr>
 <tr>
 <th>header3</th>
 </tr>
</table>

<div style="float:left;width:100px;height:100px;overflow:auto;">
 <table border=1>
 <tr>
 <td>data11</td>
 <td>data12</td>
 <td>data13</td>
 <td>data14</td>
 <td>data15</td>
 </tr>
 <tr>
 <td>data21</td>
 <td>data22</td>
 <td>data23</td>
 <td>data24</td>
 <td>data25</td>
 </tr>
 <tr>
 <td>data31</td>
 <td>data32</td>
 <td>data33</td>
 <td>data34</td>
 <td>data35</td>
 </tr>
 </table>
</div>

</div>
◎質問者からの返答

おぉ、非常にイメージに近いです。

こんなに簡単とは思いもよらず、本当にありがたいです。


2 ● pahoo
●50ポイント

TABLEの中にTABLEを入れ子にして、内側のTABLEにCSS(overflow:auto)を適用してみてはどうでしょう。

サンプルコードを以下に示します。height方向にも同様の設定ができます。

<html>
<body>
<table>
<tr>
<!-- 見出し列(固定) -->
<td>
<div style="height:100px; width:30px;">
<table height="80" width="20" border="1">
<tr><th>Line 1</th></tr>
</table>
</div>
</td>
<!-- データ列(スクロール) -->
<td>
<div style="height:100px; width:200px; overflow:auto;">
<table height="80" width="800" border="1">
<tr>
<td>ABCDE</td>
<td>FGHIJ</td>
<td>KLMNOP</td>
<td>QRSTU</td>
<td>VWXYZ</td>
<td>01234</td>
<td>56789</td>
</tr>
</table>
</td></tr>
</table>

</body>
</html>
◎質問者からの返答

コメントありがとうございます。

こちらもばっちり動きました。


3 ● kibitaki
●50ポイント

こんな感じでもよろしければ。

<div style="float:left;width:100px;">

<table style="width:100px;">

<tr><td style="width:100px;">A</td></tr>

<tr><td style="width:100px;">B</td></tr>

<tr><td style="width:100px;">C</td></tr>

</table>

</div>

<div style="width:200px;float:left;overflow:scroll;">

<table style="width:400px;">

<tr><td style="width:100px;">A01</td>

<td style="width:100px;">A02</td>

<td style="width:100px;">A03</td>

<td style="width:100px;">A04</td></tr>

<tr><td>B01</td><td>B02</td><td>B03</td><td>B04</td></tr>

<tr><td>C01</td><td>C02</td><td>C03</td><td>C04</td></tr>

</table>

</div>

<br style="clear:both;" />


・1列目と2列目以降を別テーブルにして、それぞれCSSでサイズを固定する。

・それぞれをdivで囲み、CSSでサイズを固定、float指定で横に並べて表示。

・2列目以降を表示するdivのみ、CSSでoverflow指定。

・最後にお約束でfloat指定をクリア。

◎質問者からの返答

コメントありがとうございます。

コピペしたのですがどこかにミス(右側のテーブルの高さがちょっとおかしいが問題ではない)があるようです・・・ただ、ニュアンスは理解できました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ