- ベストアンサー
▲▲HTML・CSS TABLEから文字がはみ出す場合スクロールバーをつける？またCSSのBOXについて▲▲
例えば <table border="1" width="650" height="700"> <tr> <td></td> <tr> </table> 高さを700に設定しているので、中に文字を入力し700を超えるようであれば自動的に大きさが広がると思います。 その際TABLEの右側にスクロールをつけて、700をキープする事は可能でしょうか？ またCSSでスクロールバーつきのBOXを作ったときに横のスクロールバーだけを表示するように設定は可能でしょうか？？
- hideyuki-man
- お礼率42% (121/287)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<table>要素のheight属性は規格外なので、対応出来ていないブラウザがあるはず。 意図しない表示になる可能性があるので、使わない方がいいと思います。 <td>に対してheightを指定した方がベターかと。 CSSでは横方向スクロールバーのみを表示させるものは無いが、IEが独自拡張として overflow-x: scroll; とすると横方向のスクロールバーがIEのみで表示されます。が、非IE系レンダリングエンジン(Firefoa等Geclo系、Opera等)ではエラー扱いで適用されませんので、これも止めた方がよろしいかと。 overflow: auto; か overflow: scroll; にしておいたほうが無難だと思います。
その他の回答 (1)
- abacabu
- ベストアンサー率37% (250/663)
趣味でHPを作成している者です No,1さんの回答通りですが、タグが 分かり辛そうですので、補足します。 まずスクロールバーを付けるのは CSSです。次に１つのスペースで テーブルを作るなら(他との見た目を変えるために 枠組みを作る意味で使っている場合) <p>要素を使ってもテーブルの様にそこだけ色を変えて 表示できます。 <style type="text/css"> <!-- p{width:650px; テーブルの場合基本はtd{}で指定します height:700px; back-ground-color:#ffffff; お好きな色指定 overflow:auto; ここがスクロールバーです } --> </style> <body> <p> あああああ…</p> これでCSSは機能します。 物によって指定を変える場合は <style type="text/css"> p{.sample(お好きな名前){} } と指定して bodyに<p class="sample">で指定すると使い分けが 出来ます。 スクロールは基本はautoで良いと思います。 そうすれば右側に上下スクロールが付きます。
関連するQ&A
- CSSだけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- 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
- 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構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。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
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- スクロールバーの表示位置を変えたい
スクロールバーの表示位置をテーブルの右側から、テーブルの左側に移したいのですが、単にｄｉｖ文をＴａｂｌｅの前に持ってきても変更できません。 どのようにしたら左側に表示できるのでしょうか？ <div id="rowScroll" STYLE="overflow-y:scroll; height=280;width:100%"> <table border="1" CELLSPACING="0" class="tableSearch2" width="20%" align="left"> <tr class="tdListTitle"> <td width="24" align="center" nowrap>レ</td> <td width="21" align="center">No</td> <td width="195" align="center" nowrap>L5.資源名称</td> <td width="60" align="center" nowrap>単位</td> <td width="100" align="center" nowrap>投入数量/単価</td> </tr> </table>
- ベストアンサー
- JavaScript
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
お礼
規格外などのお話を詳しくしていただき感謝します☆ できました♪わざわざぁりがとうございました(・・*)