スクロールバーと列名の固定について
- htmlで、エクセルの「window枠の固定」のような、列名だけを固定し、列値のみにスクロールバーを表示させる方法はありますか？
- 指定した列名のセルを固定し、他の列名はスクロールバーで表示させる方法はありますか？
- テーブルの列名を固定し、列値のみをスクロールバーで表示させる方法について教えてください。
- ベストアンサー
スクロールバーと列名の固定について
お世話になっております。 htmlで、エクセルの「window枠の固定」のような、 列名だけを固定し、列値のみにスクロールバーを表示 させるにはどうすればよいでしょうか？ 例えば、下記のソースがあったとすれば、 (1)の部分が固定し、(2)のみがスクロールバー で表示できる。 <table border="1"> <tr> <td>列名１</td> <!-- (1) --> <td>列名２</td> <!-- (1) --> <td>列名３</td> <!-- (1) --> </tr> <tr> <td>1</td> <!-- (2) --> <td>2</td> <!-- (2) --> <td>3</td> <!-- (2) --> </tr> <tr> <td>4</td> <!-- (2) --> <td>5</td> <!-- (2) --> <td>6</td> <!-- (2) --> </tr> </table>
- kamakuragengorou
- お礼率53% (132/248)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 列名のテーブルと列値のテーブルとに分けるとか？ <style type="text/css"><!-- .td1 { width:100px; } .td2 { width:100px; } .td3 { width:150px; } .tbody { width:400px; height:50px; overflow:auto; } --></style> </head> <body> <div> <table border="1"> <tr> <td class="td1">列名1</td> <td class="td2">列名2</td> <td class="td3">列名3</td> </tr> </table> </div> <div class="tbody"> <table border="1"> <tr> <td class="td1">1</td> <td class="td2">2</td> <td class="td3">3</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> </tr><tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div>
関連するQ&A
- フローティングフレームのスクロールについて
フローティングフォームを使用したホームページを作成しています。 ソースは下のようになっています。 <table width="550" border="1" cellpadding="3" cellspacing="0"> <tr> <td width="200" bgcolor="#FFCC00">列名</td> <td width="350" bgcolor="#FFCC00">列名</td> </tr> </table> <div style="width:568px;height:184px; overflow:hidden;"> <iframe name="List" src="menu_list.asp" width="566" height="200" frameborder="0"> </iframe> </div> menu_list.aspという別のファイルにASPを使用して、 動的にデータを書いています。 列名を固定して、動的に書かれる一覧部分だけにスクロールバーを表示させたいのですが、うまくいきません。 なぜかスクロールするときに表示される▲▼のどちらか一方しか表示されず、一番下の列だけしっかりと表示されません。どうしたらすべてきれいにスクロールできるのでしょうか？ どなたかおわかりになる方がおみえになりましたら教えてください。
- ベストアンサー
- HTML
- テーブルのスクロールバーについて
HP作成初心者です。dreamweaver cs4を使っています。教えていただきたいのですが、テーブルの右の方にスクロールバーを取り付けたいのですが、そのやり方がわからず困ってます・・・ どなたか教えていただけないでしょうか？ <table width="500" height="150" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td> </td> </tr> </table> このようなソースなんですが、お手数かけますが、ご教授お願いします。
- 締切済み
- HTML
- テーブルのスクロールバーについて
HP作成初心者です。dreamweaver cs4を使っています。教えていただきたいのですが、テーブルの右の方にスクロールバーを取り付けたいのですが、そのやり方がわからず困ってます・・・ どなたか教えていただけないでしょうか？<table width="500" height="150" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td> </td> </tr> </table> このようなソースなんですが、どこに挿入したらいいんでしょうか？ お手数かけますが、ご教授お願いします。
- 締切済み
- HTML
- ▲▲HTML・CSS TABLEから文字がはみ出す場合スクロールバーをつける？またCSSのBOXについて▲▲
例えば <table border="1" width="650" height="700"> <tr> <td></td> <tr> </table> 高さを700に設定しているので、中に文字を入力し700を超えるようであれば自動的に大きさが広がると思います。 その際TABLEの右側にスクロールをつけて、700をキープする事は可能でしょうか？ またCSSでスクロールバーつきのBOXを作ったときに横のスクロールバーだけを表示するように設定は可能でしょうか？？
- ベストアンサー
- HTML
- スクロールバーが表示されない。。
枠つきのスクロールバーをもらい ブログにつけようとしましたが、 なぜか枠だけでスクロールバーだけが表示されません。。 原因はなんでしょうか？ 改善の方法はありますか？ 下のタグです <div style="width:337;height:200;overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff; "> <Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95"> <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="ＭＳ ゴシック"> タイトル部分</font> </Td></Tr> <Tr><Td bgcolor="#ffffff" align="center" valign="top"> 内容部分 </Td></Tr> </Table></div>
- ベストアンサー
- CSS
- tableで横スクロールバーが・・
tableの高さがブラウザの表示範囲を超えると 少しだけ右の方に空白ができ、 横スクロールバーが出てきて醜い状態になってしまいます。 タグは、大まかにこのような感じで、 外部スタイルシートを適用させていて、 tableには枠線をつけています。 <body scroll="auto"> <table style="width:720px;" class="枠線、パディング、マージン等"> <tr> <td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)"); width:720px;height:150px;"> <a href="リンク">リンク</a> </td> </tr> <td colspan="1" width="100%"> <!メニュー部分> </td> <td colspan="1"> <!本文部分> </td> </tr> <tr> <td> <!著作権表示> </td> </tr> </table> </body> 本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので 横スクロールバーは出ませんが、 収まらないときには横スクロールバーが出てしまいます。 横スクロールバーを出さないようにするにはどうすればよいのでしょうか？ 分かりにくい箇所があればご指摘をお願いします。 回答をお待ちします。
- ベストアンサー
- CSS
- html+CSSでテーブルのスクロール（位置固定）
助けてください。 たとえば、１０項目の列を持つテーブルがあったとします。 レコード件数は１００件だとします。 画面に表示できるのは５項目、１０件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、５項目は固定で６項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか？
- ベストアンサー
- CSS
- テーブルがWindowの範囲を超えないように
print "<table border='1' width='100%' CELLPADDING='0' CELLSPACING='0'><tr><td>$str</td></tr></table>"; としたのですが文字列$strが長いとテーブルの幅がWindowの幅を超えて水平スクロールバーが出てしまいます どうしたらテーブルの幅が変わらないでテーブル内の文字列が長いときには自動的に範囲内で文字列が折り返されるようにできるでしょうか？
- ベストアンサー
- Perl
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
お礼
ありがとうございました。