HTML・Javascriptの質問です。


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

※FLASHは使えません。

回答の条件
  • 1人5回まで
  • 登録:2009/01/22 08:04:40
  • 終了:2009/01/22 14:46:20

ベストアンサー

id:ku__ra__ge No.1

ku__ra__ge回答回数118ベストアンサー獲得回数402009/01/22 09:24:27

ポイント80pt

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

実際には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>
id:southgate_01

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

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

2009/01/22 14:36:18

その他の回答(2件)

id:ku__ra__ge No.1

ku__ra__ge回答回数118ベストアンサー獲得回数402009/01/22 09:24:27ここでベストアンサー

ポイント80pt

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

実際には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>
id:southgate_01

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

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

2009/01/22 14:36:18
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332009/01/22 10:39:08

ポイント50pt

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>
id:southgate_01

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

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

2009/01/22 14:40:44
id:kibitaki No.3

kibitaki回答回数53ベストアンサー獲得回数42009/01/22 10:58:16

ポイント50pt

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

<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指定をクリア。

id:southgate_01

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

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

2009/01/22 14:44:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません