テーブル左右並び表示方法の解決策は?

このQ&Aのポイント
  • テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。メニューをクリックすると子メニューが現れて行数が増えるメニューにしました。しかし、右側の静的な文字が下がってしまう問題が発生しています。
  • テーブルにさらに入れ子のテーブルを追加しても問題は解決しませんでした。CSSを用いて解決できる可能性もありますが、CSSの使用経験がないため、具体的な解決策を知りたいです。
  • JavaScriptを使った書籍の応用でテーブルを左右に分割して表示させていますが、右側の静的な文字が下がってしまう問題が発生しています。CSS以外の解決策を知りたいです。
回答を見る
  • ベストアンサー

テーブルを左右に並べて表示させたいのですが

テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、(左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって)下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。(CSS使ったことがありません。) ご存知の方おられましたら、よろしくお願いします。

  • idek
  • お礼率47% (170/361)
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • t140
  • ベストアンサー率39% (59/150)
回答No.1

<td valign="top">静的な文字</td> これで恐らくいけると思います。

関連するQ&A

  • 中のテーブルにまで及ばせないようにする

    テーブルの中にテーブルがあり、 外のテーブルには .table tr .table td でclassを設定しており、 その影響を中のテーブルにまで及ばせないようにすることは可能でしょうか? <table class=css> <tr> <td> <table> <tr> <td> ここに外側のcssの影響を及ばせたくない </td> </tr> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • FireFoxでテーブルのbackgroundが表示されない

    テーブルレイアウトで、IEでは正しく表示されているbackgroundカラーがFireFoxでは表示されません。 文字が見えなくなってしまい大変困っています。 CSS初挑戦だったので、そもそもコードが正しくないのかも知れません。調べたのですが解決策がわかりません。 どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。 下記コードです。 /*CSS*/ TABLE.SAMPLE { table-layout: fixed; width: 500px; background:"#FFFFCC"; } td.td_hd { background:"#000066"; color:Silver; font-size: 12pt; } /*HTML*/ <table class=SAMPLE> <tr> <td class=td_hd>ヘッダタイトル</td> </tr> <tr> <td>あああああああああああああああああああああああああああああ</td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブルの入れ子について

    このようにテーブルを入れ子にするのは不可能なのでしょうか? <table>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>   <td>4</td>  </tr>  <tr>   <td colspan="4">     <table>      <tr>      <td>5</td>       <td>6</td>       <td>7</td>       <td>8</td>      </tr>     </table>   </td>  </tr> </table> cssなどでいろいろと設定しても、 「5・6・7・8」のセルが「1」のセルの幅にしかなりません。 colspanしているセル全体にテーブルを置きたいのですが・・・。 間違いを教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルの中にテーブルを入れ込んで・・・

    最近、質問ばかりしてるような気がするのですが・・・ m(__)m 親テーブルのセルの中に子テーブルを入れ込んで 子テーブルを親テーブルのセルの縦位置を中央に表示させたいのですがうまく行きません NN6.Xでは表示されるのですがIEだと上寄せに 表示されてしまいます。 これはIEの仕様でしょうがないのでしょうか? (↑けしてダジャレではありません(^^ゞ) セル内配置でテキストや画像は上手く 中央位置に出来るのですが子テーブルが出来ないです なぜでしょうか? 参考のためにソースコードを --------------------------------- <table width="100%" border="1" height="100%"> <tr> <td align="center" valign="middle"> <table width="50%" border="1" height="50%"> <tr> <td> </td> </tr> </table> </td> </tr> </table> ------------------------------------- よろしくお願いします。 スタイルシートやjavascriptを使ったやりかた とかもあるのでしょうか?

    • ベストアンサー
    • HTML
  • テーブルの大きさを揃えたい

    各ページの大きさ=高さが揃わないのですが原因がわかりません。 1.文字の高さが指定した高さより大きい?(普通の文字の高さは決まっているのでしょうか。) 2.入れ子にしているテーブルで2行の所が指定した高さより大きい? 3.CSSスタイルの背景の高さが関係している? 4.全体の大きさがずれている? 参考にHTML(高さのみ)抜き出しますので教えていただけませんか。 【ページ1】 <table width="700" height="55" border="0"> <tr> <td><img.gif height="40"> welcome homepage(見た目は2行)</td> <td> </td> <td align="right" valign="bottom"> <img.gif" height="20" ></td></tr></table> <table height="15"></table> <table height="430"> <tr><td height="375"><flash.swf height="360"></td></tr> <tr><td height="25"></td></tr> <tr><td height="15"></td></tr></table> 【ページ2】 <table width="700" height="55" border="0"> <tr> <td height="40"> <img.gif height="40"></td> <td height="40"> </td> <td height="40"></td></tr> <tr><meta http-equiv="Content-Style-Type" content="text/css"> <td height="15"> welcome homepage </td> <td height="15"></td> <td align="right" height="15">|HOME|MAP|MAIL|</td></tr></table> <table height="15"></table> <table height="430"> <tr><td> <table height="10"> <tr><td height="15"></td></tr> <tr><td><IFRAME height="380"></IFRAME></td></tr> </table></td></tr> <tr><td height="15"></td></tr></table>

  • CSSでテーブルを表示させるには

    CSSでテーブルを表示させたいのですが、やり方が分かりません。教えてください。 現在は、HTMLで以下のように記述しています。 -------------------------------------------------------- <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#000000">テキスト</td> </tr> </table> -------------------------------------------------------- 具体的には、クラスを指定して、<div class="table">テキスト</div> と記述したときにテーブルを表示させたいです。 回答よろしくお願いします。

    • ベストアンサー
    • CSS
  • tableの中にtableを作ると、width指定が機能しない

    tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。 例: <table width=300> <tr><td> <table width=100> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr> </table> </td><td> <table width=100> <tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr> </table> </td><td> <table width=100> <tr><td>ccccccccccccccccccccccccccccccccccc</td><tr> </table> </td></tr> </table> width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。 これを100pxという値に従わせるにはどうしたらいいでしょうか?

    • ベストアンサー
    • HTML
  • メニューの正しい配置の仕方

     現在、テーブルを使ってページを左右に二分し、左側にサイトの目次を、右側に本文を記述しています。 <table> <tr> <td>目次部分</td> <td>本文</td> </tr> </table> しかし、この方法は良くないと聞き、CSSを使って配置をしようと考えています。  Wikipediaみたいな感じに、HTMLでは本文を先に記述し、その下にメニューの部分を記述、そしてその部分をCSSで本文の右側に配置しようと思い、Wikipediaのソースを見てみたのですが、複雑でよくわかりませんでした。  Wikipediaの方法でなくても構いませんので、どなたか、アクセシビリティを考慮したメニューの作り方をご存知の方がいらっしゃいましたら、教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • テーブルをcssでどうやる?

    <table border="1"> <tr> <td>あ</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> </tr> <tr> <td>かか</td> <td>き</td> <td>く</td> <td> け け け </td> <td>こ</td> </tr> <tr> <td>ささ</td> <td>ししし</td> <td>す</td> <td>せせ</td> <td>そ</td> </tr> </table> 横にも長く、縦にも長く セルに入る文字も1文字限定ではない場合、 テーブルで表現するのは簡単ですが これをcssでできるのでしょうか? セルに入る文字数が同じならば、なんとかできそうな気もするんですが そうじゃない場合、 縦の列を並べるというか事はできるんでしょうか?

    • ベストアンサー
    • HTML
  • DHTMLでテーブルの行の表示・非表示を切り替える。

    こんにちは。 WEBアプリケーションのモックアップを作成しています。 自身はJava屋ですが、DHTMLに明るくないため、苦戦しています。 同一画面内のリンクがクリックされた場合に・・・ テーブルの行の表示、非表示を切り替えたいのです。 <!-- ========================= --> <!-- テーブル1 --> <table border="1"> <tr> <td>ヘッダ1</td> <td>ヘッダ2</td> </tr> <!-- ☆☆☆ ここから ☆☆☆ --> <tr> <td>111</td> <td>aaa</td> </tr> <tr> <td>222</td> <td>bbb</td> </tr> <!-- ☆☆☆ ここまで消したい ☆☆☆ --> </table> <!-- テーブル2 --> <table border="1"> <tr> <td>ヘッダA</td> <td>ヘッダB</td> </tr> <tr> <td>あああ</td> <td>いいい</td> </tr> </table> <!-- ========================= --> <tr>タグを<div>タグで囲んで、styleでhidden、visibleを切り替えようと考えましたが、<tr>に<div>タグが使えない事を知りました。 そこで、テーブル1を大きくテーブルで囲み、ヘッダとボディ部をセルに入れて、セルの表示・非表示を切り替えました。 これは上手くいったのですが、非表示にした場合、テーブル2との間は詰まるようにしたいのですが、もともと表示されていた分のスペースが出来てしまいました。 あまり、ロジックを組み込まずに作ろうと考えているのですが、上手い方法が思いつきません。 何か良い方法がありましたら、ご教授願います。 ターゲットのブラウザは… IE5.5~IE7 です。

    • ベストアンサー
    • HTML

専門家に質問してみよう