- ベストアンサー
CSSでテーブルを作成する際に問題が発生しています
- スタイルシートでテーブルを作っている際に、左に設置したメニューのテーブルの右側に不要なスペースができ、メニューのテーブルと同じ色になる問題が発生しています。
- .tdmenuクラスにはvertical-align:topとbackground-color:#fa8072が設定されており、p.menuクラスにはfont-size:0.75em, margin-left:0, margin-right:0, margin-bottom:50px, margin-top:0, width:140px, background-color:#fa8072, height:2emが設定されています。
- この問題が発生している要因として、スタイルシートの設定が適応されていることが考えられます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
width:140px; によって幅が140pxになるまで余白が作られています。 そのことが質問内容の「不要なスペース」でしたら、 .tdmenuとp.menuの「width:140px;」を消してみてください。 ちなみに「テーブルの右側」には色の付いた部分は確認できませんでした。 ＞あと、タイトルが出ないのですが、原因は何でしょうか？ 以下のように修正してください。（５行目） 誤： <meta http-equiv="Content-Type" content="text/html;charset=shift_jis> 正： <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> クォーテーションが無いので、次の<meta>の"までがcontent=になっていたようです。 ＞他にも変なところがあれば、教えて頂きたいです。 後ろから（空の行を省略しますが）４行 <td class="tdcontents"> <div class="contents"> </td></tr></table> </div></body></html> ↓ <td class="tdcontents"> <div class="contents"></div> </td></tr></table> </body></html>
その他の回答 (1)
- 15mm
- ベストアンサー率65% (65/100)
ＨＴＭＬの内容がわからないと状況が見えてきませんよ。 ＣＳＳは見栄えを指定するものですから、何がどう配置されているのかわかりません。 一応文章のみから判断した回答を・・・ 背景色が同じであるスペース、というのは、paddingのことだと思います。 メニューのテーブルとやらの外側の要素（おそらくp.menu）に padding:0px; を入れてみてください。 推測の下での回答ですので、正確な回答を得たければＨＴＭＬのほうの提示をお勧めします。
お礼
回答ありがとうございます。 どう質問すべきかもわからなかったので… すみませんでした。 【htmlの内容】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis> <title>○○○</title> <meta http-equiv="description" content="○"> <link rel="start" href="http://○.html"> <link rel="stylesheet" type="text/css" href="design.css" media="all"> </head> <body> <table cellspacing="0"><tr> <td class="tdhead" colspan="2"> <p class="head" lang="en"> <img src="○.gif" alt=" ">○○</p> </td> </tr><tr> <td class="tdmenu"> <p class="menu"> <a>○</a> <a href="○.html">○</a> <a href="○.html">○</a> <a href="○.html">○</a> <a href="○.html">○</a> <a href="○">○</a> </p> </td> <td class="tdcontents"> <div class="contents"> </td></tr></table> </div></body></html> このような感じでお分かり頂けるでしょうか？ 「p.menu」 に 「padding-right:0;」といれてみましたが、ダメでした。 あと、タイトルが出ないのですが、原因は何でしょうか？ 他にも変なところがあれば、教えて頂きたいです。 よろしくお願いします。
お礼
お礼が遅くなり、すみませんでした。 質問の回答についてですが、 仕様を変えたため、確認していません。。 せっかくご回答下さったのに、すみません。 最後の</div>の位置は、 大変参考になりました。 ありがとうございました。