- ベストアンサー
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
#test1はちゃんとスクロールバーが付くのに、 テーブル内の設定したセルにはスクロールバーが付きません。 tableタグやth,tdタブにも設定したりと色々しましたが、 付きません。 なぜなのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <style type="text/css"> table { background:yellow; } th,td { width:200px; border:solid 1px #000000; overflow:scroll; } #test1 { width:100px; overflow:scroll; } </style> </head> <body> テーブル <br /> <table> <tr> <th>見出し１</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td> </tr> <tr> <th>見出し２</th><td></td> </tr> <tr> <th>見出し３</th><td>本文</td> </tr> </table> <div id="test1">あああああああああああああああああああああああああああああああああ</div> </body> </html>
- rakuda2525
- お礼率27% (18/65)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> なぜなのでしょうか。 overflowプロパティの適用対象はblock要素”display : block”ですが、<td>／<th>はそれぞれtable要素のグループであり”display : table-cell”ですので適用外となります。 なので、ANo.1の回答者様の仰る通り、セルの中に更にblock要素のタグを入れた上で、それに対するスタイル設定でoverflowプロパティを使用して下さい。 （overflowプロパティ参考）http://w3g.jp/css/display_position/overflow
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
セルの中に、<div>タグを入れてみたらどうでしょうか。 ----------------------------------------------- #test1 { width: 100px; overflow: scroll; } .sc { width: 100px; overflow: scroll; } </style> ----------------------------------------------- <td> <div class="sc"> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </div> </td> -----------------------------------------------
お礼
ありがとうございました！解決しました！
関連するQ&A
- テーブルの文字をオーバーラップさせたくない
お世話になります。 VisualStudio 2002で作ったWEBアプリケーションを、VisualStudio2010に切り替える作業を実施しています。 VisualStudio 2002で出力されるDOCTYPEと、VisualStudio2010のDOCTYPE（正確には2005から）が異なっており、出力されるページの表現が変わってしまいました。 VisualStudio2002では、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html>・・・ VisualStudio2010では、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">・・・ となっています。 お聞きしたいのは、style="table-layout:fixed;"の付いたテーブルの表現についてです。 VisualStudio2002では、前のセルの文字列がセル幅より大きい場合、はみ出した部分は隠れて表示されます。 VisualStudio2010では、はみ出した部分が次のセルに被さって表示されます。 これをVisualStudio2002と同じように、はみ出した部分を隠して表示したいと考えています。 なお、出力はIE8のみをターゲットとしており、IE8で正しく表示出来れば問題ありません。 （Google Crhomeでは双方ともオーバーラップされて表示されました） VisualStudio2010のDOCTYPEを2002と合わせれば解決しますが、他の部分で影響が出る為、出来ればVisualStudio2010のDOCTYPEをデフォルトのままで、テーブルのはみ出した文字を隠したいと考えています。 具体的なソースは以下のとおりです。 【VisualStudio 2002】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head><title>オーバーラップされない</title></head> <body> <table border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;" width="100px"> <tr> <td width="50px"><nobr>テストデータ</nobr></td> <td width="50px">入力</td> </tr> </table> </body></html> 【VisualStudio 2010】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title>オーバーラップされる</title></head> <body> <table border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;" width="100px"> <tr> <td width="50px"><nobr>テストデータ</nobr></td> <td width="50px">入力</td> </tr> </table> </body></html> 恐れ入りますが、お分かりになる方、ご回答頂けますでしょうか。 よろしくお願いいたします。
- ベストアンサー
- 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構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。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でテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <thead>、<tbody>、<tfoot> タグ系を使うまでは分かりました。 が、<tbody>部分は、スクロールせずにただ普通に表示されているだけでした。 OKwebで検索し、サンプルを作成してくださった方がいたので 試しにソースをコピーして、ローカルで試してみましたがダメでした。 ↓ちなみにソースです。width や height の値をいろいろ変えたりはしました。↓ <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px" height="100px"> <thead> <tr><th>M1</th><th>M2</th><th>M3</th></tr> </thead> <tfoot> </tfoot> <tbody style="width:180px;height:60px;overflow:scroll"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </tbody> </table> </body> </html> 自分なりに位置を固定して試したり、他のサイトも検索してみましたが、<tbody>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- ベストアンサー
- HTML
- tableの中にtableを作りスクロールさせたい。
tableの中にtableを作りスクロールさせたい。 tableの中にtableを作りスクロールさせたいのですが、書きサンプルで思うようになりません。 table一つなら上手くいくのですが、どこが悪いでしょうか。 <html lang="ja"> <head> <title></title> </head> <body> <table border="1" width="100%"><tr><td></td></tr> <tr> <td > <div style="height:40%;width:100%;overflow-y:scroll;"> <table border=1 width="100%" bgcolor="#9999ff"> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> </table> </div> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- tableのheight指定が効かない
tableの高さを固定したく、heightとoverflowを指定したんですが、 tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。 /*----外部CSS----*/ .sample{ color: #ffffff; background-color: #000000; height: 500px; width : 90%; overflow:scroll； } /*----ソース-----*/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" hrefstyle.css"></head> <body> <table class="sample"><tbody><tr> <td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr> <td class="a0"></td><td class="a0"> <div class="text">本文（heightが700pxくらいの内容）</div> </td><td class="a0"></td></tr><tr> <td class="a3"></td><td class="a0"></td><td class="a4"></td> </tr></tbody></table> ※tdのclassはテーブルのふちに用いてる画像を指定してあります。 </body> </html> 解決方法をご存知の方、よろしくお願いします。
- ベストアンサー
- HTML
- テーブルについて教えてください
テーブルについて教えてください <table border="1"> <tr> <th colspan="3">見出し</th> </tr> <tr> <th>1</th> <td rowspan="3">A</td> <td rowspan="3">B</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> </table> |---------------------| |------|---------------| |------| | |------| | |------|--------------| 絵が少しおかしいかも知れませんが・・・上の絵のような感じのテーブル枠になると思います 下の絵のように上の物の一番下にもう一列、縦割していない物を追加したいのですが、どうすればいいでしょうか？ 別に新たにテーブルを作ると切れ目が出来てしまうのでできればそれは避けたいです |---------------------| |------|---------------| |------| | |------| | |------|--------------| |---------------------| よろしくお願いします
- ベストアンサー
- HTML
- ブラウザによってテーブルのセルの高さが変わる
質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、Firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト（safariではこのように表示されます）です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- <table class="hogs" cellspacing="5"> <tr> <td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td> <th height="22">項目１</th> <td>文章１</td> </tr> <tr> <th height="22">項目２</th><td height="22">文章２</td> </tr> <tr> <th height="140" valign="top">項目３</th><td valign="top">文章３</td> </tr> </table> --- CSS --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }
- ベストアンサー
- HTML
- こういう構造のtableはできるでしょうか
HTML で、テーブルをこういう構造にすることは可能でしょうか。 ┏━━━━┳━━━━━━┳━━━━┳━━━┓ ┃見出し１┃○○○○○○┃見出し２┃○○○┃ ┣━━━━╋━━┳━━━┻━━━━╋━━━┫ ┃見出し３┃○○┃少し長い見出し４┃○○○┃ ┗━━━━┻━━┻━━━━━━━━┻━━━┛ ↓こんな感じでできないかなと思ったのですが、できませんでした。(win7/IE10) <table border="1"> <tr> <th>見出し１</th><td colspan="2">○○○○○○</td> <th>見出し２</th><td>○○○</td> </tr> <tr> <th>見出し３</th><td>○○</td> <th colspan="2">少し長い見出し４</th><td>○○○</td> </tr> </table> ※インデントは全角スペースになっています ---------- １） 対象ブラウザは IE8～IE10 できればchrome等でも対応できたほうが良いのですが、最低限IEで表示できれば良いです。 ２) カラムの width 等を指定することなく左端や右端を揃えたいです。 ２の条件がなければ float とかも考えたのですが… どなたか良い方法をご存知の方がいらっしゃいましたら教えて下さい。 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
ありがとうございました！解決しました！