- ベストアンサー
テーブルのスクロール（HTML）
ＤＢの内容をテーブルを使用して表示させました。 初期表示の時は20行ぴったり表示されるのですが、 マウスのホイールでスクロールすると一番上と一番下の行が切れてしまいます。 何回スクロールしても20行ずつ、データが切れることなく表示されるようにしたいのですが、 どうすればよいのでしょうか？ アドバイスお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
noname#19206
回答No.3
要するに１行ごとにスクロールできないか、という問題ですね？ セレクトボックスであれば可能ですが、テーブルでは多分１行ごとのスクロールは難しいと思います。 また、例え今後ご希望にかなった HTML や CSS の仕様が導入されたとしても、 古いブラウザなど特定の環境では全く意味を成しません。 このレベルであればそう神経質にならずとも一切差し支えがないレベルです。 ちょっと今回は妥協するしかないんじゃないかなぁ～と思います。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
回答No.2
この場合、スクロールしているのはどこですか？ ・ページ全体 ・テーブル（divで指定された範囲？） ・iframe それにより対応がかわるとおもいます
noname#19206
回答No.1
詳しい状況を見て判断する必要がありそうなので、ソースを提示していただけると助かります。
補足
一応ソースはこんな感じです。 よろしくお願いします。 <html> <body> <table width = "100%" border = "0" Cellspacing = "0" cellpadding = "0"> <tr><td align = "center"> <table border= "1" Cellspacing = "0" width = "80%"> <tr><td width = "50" heigt = "20">行番号</td><td>データ番号</td> </tr> </table> </td></tr> <tr> <td align = "center"> <div style= "overflow: auto;width: 80%;height: 200px;"> <table border = "1" width = "100%" align = "center" Cellspacing = "0"> <tr><td width = "50">1</td><td heigt = "20">データ1</td></tr> <tr><td width = "50">2</td><td heigt = "20">データ2</td></tr> <tr><td width = "50">3</td><td heigt = "20">データ3</td></tr> <tr><td width = "50">4</td><td heigt = "20">データ4</td></tr> <tr><td width = "50">5</td><td heigt = "20">データ5</td></tr> <tr><td width = "50">6</td><td heigt = "20">データ6</td></tr> <tr><td width = "50">7</td><td heigt = "20">データ7</td></tr> <tr><td width = "50">8</td><td heigt = "20">データ8</td></tr> <tr><td width = "50">9</td><td heigt = "20">データ9</td></tr> <tr><td width = "50">10</td><td heigt = "20">データ10</td></tr> <tr><td width = "50">11</td><td heigt = "20">データ11</td></tr> <tr><td width = "50">12</td><td heigt = "20">データ12</td></tr> <tr><td width = "50">13</td><td heigt = "20">データ13</td></tr> <tr><td width = "50">14</td><td heigt = "20">データ14</td></tr> <tr><td width = "50">15</td><td heigt = "20">データ15</td></tr> <tr><td width = "50">16</td><td heigt = "20">データ16</td></tr> <tr><td width = "50">17</td><td heigt = "20">データ17</td></tr> <tr><td width = "50">18</td><td heigt = "20">データ18</td></tr> <tr><td width = "50">19</td><td heigt = "20">データ19</td></tr> <tr><td width = "50">20</td><td heigt = "20">データ20</td></tr> </table> </div> </td> </tr> </table> </body> </html>