tableタグの挙動について教えてください

前へ 次へ
このQ&Aのポイント
  • tableタグの挙動について教えてください。ブラウザ表示（Chrome）では、指定した幅よりも狭く表示されてしまいます。
  • tableタグの幅を指定しても、ブラウザ表示では指定した幅よりも少し狭くなります。この現象の原因を知りたいです。
  • tableタグの幅を指定しているにもかかわらず、ブラウザ表示では指定した幅よりも狭く表示されています。どうすれば正確な幅で表示できるのでしょうか？
回答を見る
  • ベストアンサー

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
  • 回答数2
  • ありがとう数0

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

　tableにwidth属性で指定している240pxは、詳細度が0として計算されますから、スタイルシートで.list-box table{ width:100%;}の指定が詳細度(0011)で上書きされます。 　tableが含まれるブロックであるbody要素にstyle属性で指定してあるwidth:240pxは詳細度(1000)ですね。 カスケーディングの仕組みは ・出所によるソート 　　ユーザーの最重要宣言＞著者の最重要宣言＞著者＞ユーザー＞ブラウザのスタイルシート ・詳細度によるソート ・出現順番によるソート 　ですから、指定されていないものを探すと、ブラウザの持つデフォルトのスタイルシートのmargin,paddingが怪しい。 html,body{margin:0;padding:0;} table{margin:1em 0;} 程度を加えることで解決すると思います。 (補足) ★必ず基点となるセレクタを書くようにしましょう。紛らわしくなくなります。 .list-box→div.list-box 　　CSS2以降、基点となるセレクタを書くことになりました。いきなり.からはじめると 　　*.list-boxとみなされます。 ★余計なものは書かないようにしましょう。 class="list-box"は必要ですか？ 　tableにはsummaryが必須ですから、 　<table summary="list"> 　で 　table[summary="test"]{・・・} 　でよいかと ★tableがデザインのためでしたら使用するのは控えましょう。

nekogeruge
質問者

補足

単純な解答を求めていたのですが、 tableがここまで複雑だとは目がから鱗です！ まだまだ勉強不足な事を痛感させられました＞＜ 大変大変ありがとうございます！！

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

テーブルの横幅を指定しているのにcssで100%設定しているのは意味ありますか？ それを差し引いても幅は240になりそうですが、 あとは table{border-collapse:collapse;} td{border:0px solid;} とか指定してみてはいかがでしょうか？

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

関連するQ&A

  • テーブルのセル間に余白が空いてしまいます

    2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。 しかし、画像と文字の間（1列目と2列目の間）に余分な空白ができてしまいます。 margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。 htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか？ また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。 divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。 <!-- htmlのコード --> <body> <table width="700" border="0" > <tr> <td><center> <img src="img/top_image.png" /> </center></td> </tr> <table class="table001"> <tr> <td rowspan="2"><img src="img/aaa.bmp" /></td> <td><h2>このサイトのごあんない</h2></td> </tr> <tr> <td><p>このサイトは～～～～～～</p></td> </tr> </table> <div style="margin-top:10px"></div> <table class="table001"> <tr> <td rowspan="3"><img src="img/bbb.bmp" /></td> <td><h2>このサイトのごあんない２</h2></td> </tr> <tr> <td> <p>このサイトは～～～～～～</p> <p>また、このサイトの～～～～～～。</p> </td> </tr> <tr> <td> <p>問い合わせ</p> <p>電話番号　000-000-0000</p> </td> </tr> </table> </body> /* CSSのコード */ body { background-color:#6C6; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; font-size: 0.8em; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic",sans-serif ; } #pageBody { width: 760px ; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: #FFF; } table.table001{ background-color: #E8FECF; width: 700px; margin-left: auto; margin-right: auto; white-space:normal; } h2{ padding-left: 10px; background-color: #009900; width: 180px; color:#FFF; font-size: 1.1em; height: 25px; line-height:25px; }

    • ベストアンサー
    • HTML
  • mac＆winのsafari4.03にてtableタグのmarginの挙動がおかしい件

    htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------

    • ベストアンサー
    • HTML
  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • テーブルの上下線を消したい

    タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか？ 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P>　</P><p>　</p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。

    • ベストアンサー
    • HTML
  • IE以外のブラウザで隙間ができる

    お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30">&nbsp;</td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30">&nbsp;</td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • IEと同じようにFirefoxでもテーブルが表示されるには？

    head内にスクロール非表示のタグを入れています。 http://aomi1111.sakura.ne.jp/temp/in/i106/index.htmlのような感じでノーフレームです。 IE7、IE6ではテーブルが画面の上から下まで表示されテーブル内でスクロールが出来ますが、Firefoxで見るとテーブルが画面下に飛び抜けてしまいテーブル内のスクロールが出ず、スクロール非表示にしてるので下が見れなくなってしまいます。上のサイトのように表示するにはどうすれば良いでしょうか？このテンプレートをノーフレームにしたいです。自分なりに(初心者です)いじくりすぎて原形がなくなりました。必要なさそうな(？)タグは載せていません。 ■CSS■ body,td,th{ font-size:70%; color:#444; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; margin:0px;padding:0px; background:#fff url() repeat fixed; } body{text-align:center;} table{margin:auto;height:100%;} #table2{ filter:alpha(opacity=100); width:551px;height:100%; background:#fff; padding:0px 10px 0px 10px; overflow:auto; } #table3{ filter:alpha(opacity=90); background:#fff url() no-repeat; padding:0px; width:220px;height:100%; } ■top.html■ <head> <style type="text/css"> <!-- body{overflow:hidden;} --> </style> </head> <body> <★table cellspacing="0"> <tr><td> <div id="table2">左の本文</div> </td><td> <div id="table3">右メニュー</div> </td></tr> </table> </body> ★のtableを消してcssの#table内にfloat:left;margin-left:120px;等入れるとFirefoxでも表示されますが、その場合table2、table3を真ん中にこさせる方法が解りません。。。どなたか解る方がいましたらよろしくお願い致します。

  • tableにtable。table同士の間隔を拡大

    スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • テーブルの上と左に白い線を付けたい

    下記に書いたのHTMLについて質問があります。 説明が下手かもしれませんが、宜しくお願いします。 このHTMLを書いたら外側が黒枠のテーブルっぽいのがが出るんです、 見出し部分の「ここにタイトル」という緑部分の、上と左部分が白色になってる部分があるんですが、これって新規で作る場合はどんな手順で作ればいいのでしょうか？ 当方使用しているソフトはDreamweaver8です。 <table><tbody><tr><td> <div style="background:#000;font-size:13px;color:#000;padding:1px"><div style="border-width:1px;border-style:solid;border-color:#fff #80dd99 #80dd99 #fff;background:#90eeaa;text-align:center;padding:3px"> ＊　ここにタイトル　＊ </div><div style="margin-top:1px;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;background:#fff;padding:8px"> ここに本文 </div></div> </td></tr></tbody></table>

    • ベストアンサー
    • HTML
  • テーブルの形に沿って画像を作り、貼り付けたら見るブラウザによって余白が生じる。

    現在、角丸テーブルを使ってWebページを作っておりまして 角丸部分の形に沿って画像をつくり、貼り付けているのですが、保存しアップしてみると IEでは自分が作ったように見れるのにOperaとFireFoxでは上部分に余白が生じます。 どのようにしたら、余白を無くせるでしょうか？ テーブル部分とその部分のタグはこのようになっています <div align="center"> <div style="width:750"> <div class="kado"> <div class="kado1">-</div> <div class="kado2">-</div> <div class="kado3">-</div> <div class="kado4">-</div></div> <div class="kado5"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top" style="position:relative; top:-4;"> <td width="5" colspan="4"> <img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"> <img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"> <img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"> <img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr style="position:relative; top:-4;"> <td width="33"> <a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"> </a> </td> <td><br></td> </tr> </table> </div> <div class="kado"> <div class="kado4">-</div> <div class="kado3">-</div> <div class="kado2">-</div> <div class="kado1">-</div> </div> </div> </div> 外部読み込みでこの角丸にするためのCSSもいれてます <!-- .kado { background: ./img/wall.png; } .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#fff; } .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#fff; } .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#fff; } .kado4 { margin: 0 1px;height:1px;overflow: hidden; background-color:#fff; } .kado5 { margin:0px; padding:0px; background-color:#fff; } --> おそらく何かがおかしいとは思うのですが、よくわかりません。 下らない質問だとは思いますが、回答の程お願いします。 そのWebページのURIも乗っけておきます。 http://wing2.jp/~movie_village/index2.htm

    • ベストアンサー
    • CSS
  • 外部スタイルシートがテーブル内に効かない

    外部スタイルシートの設定が、テーブル内には効きません。 特に、フォントや行間を効かせたいのですが、どうしたらいいのでしょうか。 以下、大雑把ですが。 #main { float: none; margin-left: 132px; line-height: 1,5em; margin-top : 50px; } #main td, th { line-height: 1,5em; } と外部スタイルシートで指定していて、 <DIV id="main"> <TABLE cellpadding="10" background="image/003-002.gif" style="filter:Alpha(opacity=75);"> <TBODY> <TR> <TD> <H3>内容</H3> </TD> </TR> </TBODY> </TABLE> というようなテーブルを書きました。 テーブルがなければ、スタイルシートは効きます。 初歩的な質問だとは思うのですが、テーブル内に行間などを設定する方法をお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する