• ベストアンサー

tableタグの全体サイズを可変させたい

javascriptを利用して、table内tdのdisplay:none(初期状態)とdisplay:blockをボタンクリックで交互に切り替えるページを作っています 表示上はボタンをクリックするとtable内のtd1つが出たり消えたりして、その都度table全体の幅は可変します DOCTYPE宣言をする前まではtable全体のサイズを指定しなければtdのサイズ指定だけで何とかなっていたのですが、 DOCTYPE宣言後はtable全体のサイズを指定しないと表示がおかしくなってしまいました tableタグの全体サイズを可変させるにはどうすればよいでしょうか？

  • HTML
  • 回答数1
  • ありがとう数0

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

  • ベストアンサー
回答No.1

display:noneとdisplay:blockを切り替えるJavaScriptのfunctionに テーブルのHeightを変える関数を入れちゃダメですか？ 全然的外れだったりして…

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • table要素のwidthの解釈

    tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する　→つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。

  • テーブルのフォントサイズ

    こんにちは。 テーブルタグ内でフォント指定のやり方を探しています。 現段階では ＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＝１＞ ＜ＴＲ＞＜ＴＤ＞＜ＦＯＮＴ　ＳＩＺＥ＝２＞文章＜／ＦＯＮＴ＞＜／ＴＤ＞＜／ＴＲ＞ ＜／ＴＡＢＬＥ＞ のようにやっています。 テーブルで一括して指定できる方法を教えてください！ お願いします

    • ベストアンサー
    • HTML
  • 初期状態でテーブルの非表示

    JavaScript初心者です。 チェックボックスをチェックされたときだけ テーブルを表示させるようにしたいのです。 いろいろ調べながらようやく出来たのですが、 最初にテーブルを非表示にしたいのに出来ません。 style="display:none"を指定すると非表示になるのではないのでしょうか？なにが間違っているのでしょうか？他の記述があるのでしょうか？ function Click_idaaa() { 　　if (document.all.idaaa.checked==true) { 　　　　document.all.aaa.style.display = "block" 　　} else { 　　　　document.all.aaa.style.display = "none" 　　} } function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } <body> <div> <p><input id ="idaaa" type="checkbox" name="aiueo" 　　onclick="Click_idaaa()">あいうえお <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ</p> </div> <div id="aaa" style="display:none:"> 　<table border="1" class="input"> 　　<tr><th><font size="-1">■テーブル１</font></th><td> 　　<input type="text" name="textfieldName" size="24"></td></tr> 　</table> </div> <div id="bbb" style="display:none:"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> </body> 上記で行き詰ってしまい他の方法でと思い、 <body onload="Click_idaaa():Click_idbbb()"> と指定して非表示にさせようとしても出来ませんでした。 複数指定は：ではないのでしょうか？ どの方法でもいいのでテーブル1と2を初期状態で非表示にしたいのです。

  • テーブル内の文字サイズを変更したい。

    HTMLのテーブル内の文字サイズを変更したいのですが。 イマイチ上手くいかずに悩んでいます。 出来れば全体的に<TABLE></TABLE>のほうでいじれますか？ <TD>タグや<TR>タグのところでいじくるのですか？

    • ベストアンサー
    • HTML
  • 階層式メニューをtableタグ内に

    初めてJSPとJavaScriptをいじります。 階層メニューを作りたいのですが、 <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>見出し１</td> <td>見出し２</td> <td>見出し３</td> </tr> <% for(int i = 0; i < 5; i++){ %> <tr> <td colspan="3">▼階層１</td> </tr> <tr> <td colspan="3">▽階層２</td> </tr> <tr> <td>項目１</td> <td>項目２</td> <td>項目３</td> </tr> <% } %> </table> このようなテーブルを作成して、 ▼階層１をクリックしたら▽階層２以下が表示・非表示されるように、 ▽階層２をクリックしたら項目１～項目３が表示・非表示されるようにしたいのです。 http://phpjavascriptroom.com/?t=js&p=tips_node のサイトを参考にしてみましたが、 <div id="open_1" class="child" style="display:none;">をどの位置に入れても階層メニューがうまく動きません。 アイコンは変わるけど下の階層が開閉しなかったり、全く動かなくなったりします。 どうしたらうまく動くようになるのでしょうか？参考になるサイト等ありましたら教えて下さい。

  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？

    • ベストアンサー
    • HTML
  • すべてのテーブルの文字のサイズは設定したくない

    table { font-size: 2em;　　　　←tableタグに指定 } これで、ページ内のすべてのテーブルの中の文字のサイズが統一されますが、 ある複数のテーブルは、 font-size: 2em;　　ではないサイズで表示させたい場合、 スタイルシートはどのように宣言すればいいのでしょうか？ table { に名前を付けて宣言する方法と、 実際ＨＴＭＬでテーブルを書く時の文法を教えてください。

  • 画像がテーブル内に収まらない

    IEを使っているのですが テーブルの中に縮小した画像を入れると、 元の画像のサイズ分、テーブルが広がってしまいます。 テーブルのタグは <TABLE> <TBODY> <TR> <TD><A href="aaa.html"><IMG class=size src="/image/aaa.jpg"></A></TD></TR></TBODY></TABLE> このような感じです。 スタイルシートで sizeは } IMG.size { ZOOM: 20% } のように指定しています。 IE8の時は 画像をクリックする時も、マウスカーソルで画像を押してる時だけ元の画像サイズが、点々で表示されます。 IE９の場合も同じく画像が広がりますが マウスカーソルを画像に当てても点々は表示されません。 スレイプニル等のブラウザなら、テーブルの中に画像を入れても 画像は指定したサイズで表示され、テーブルに収まります。 テーブルのサイズを <TABLE width="30%"> としても、やはり画像の元サイズを基準にテーブルも広がってしまいます。

  • tableタグについて

    tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}

    • ベストアンサー
    • CSS
  • テーブルのサイズについて

    ＨＰ作成のとき、　table width (height) の設定をしますが、ウィンドーを縮めたときに１列の文字が２列になるのがいやで、widthを％で指定せず固定（px）でいつもやります。 ただわたしはＡ４ノートＰＣでフルサイズで見てバランスがいいと思ってても、これより大きいサイズではえらく余白ができると思います。 そこで質問なのですが、一般的にテーブルのサイズは固定でやるものなのでしょうか？それとも可変でやるものなのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する