0

以下のようなhtmlスクリプトがあります

            <header>
            <div id="header">
                <table class="headertable">
                    <tr>
                        <td>
                            <table class="headertable">
                                <tr>
                                    <td colspan="2">
                                        <div id="site-title" class="site-title">
                                            <img src="~/Images/site-title.gif" alt="site-title", title="site-title" id="img-site-title" style="display:block" />
                                        </div>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td>
                                        <div id="fullbannerad" class="fullbannerad">
                                            <img src="~/Images/fullbanner.gif" alt="fullbannerad", title="fullbannerad" id="img-fullbannerad" />
                                        </div>
                                    </td>
                                    <td>
                                        <div id="halfbannerad" class="halfbannerad">
                                            <img src="~/Images/halfbanner.gif" alt="halfbannerad", title="halfbannerad" id="img-halfbannerad" />
                                        </div>
                                    </td>
                                 </tr>
                              </table>
                        </td>
                        <td>
                           <div class="site-logo">
                              <img src="~/Images/site-logo.gif" alt="site-logo", title="site-logo" id="img-site-logo" />
                           </div>
                        </td>
                      </tr>
                   </table>
            </div>
        </header>

以下はcssです

table.headertable {
border-spacing: 0;
border-collapse:collapse;}

.headertable td {
padding:0;}

以下のコードでは、ページの td 要素と table(ネストされたテーブル) 要素の間にスペースが追加されています (これは chrome デバッガーで確認しました)。

<td>
   <table class="headertable">

この問題を解決するにはどうすればよいですか? 提案してください。

4

2 に答える 2

0

float プロパティを使用してネストされた div を使用することで、この問題を解決しました。HTML5 では、レイアウト デザインに入れ子になったテーブルは推奨されません。詳細については、このリンクを参照してください。ジェニファー、ありがとう。

以下は私のコードの変更です

            <div id="header" class="clearfix">
                <div id="sitetitle" style="float:left">
                    <a href="/Publication/Config/title">
                        <img src="/images/site-title.gif" alt="site-title" , title="site-title" id="img-site-title" />
                    </a>
                </div>
                 <div id="logo" style="float:right">
                     <a href="/Publication/Config/logo">
                        <img src="/images/site-logo.gif" alt="site-logo" , title="site-logo" id="img-site-logo" />
                     </a>
                 </div>
                  <div id="bannerad" style="float:left">
                      <a href="/Publication/Config/fullbanner">
                        <img src="/images/fullbanner.gif" alt="fullbannerad" , title="fullbannerad" id="img-fullbannerad" />
                       </a>
                      </div>
                    <div id="halfbannerad" style="float:right">
                        <a href="/Publication/Config/halfbanner">
                            <img src="/images/halfbanner.gif" alt="halfbannerad" , title="halfbannerad" id="img-halfbannerad" />
                        </a>
                    </div>

            </div>
于 2013-03-19T04:04:14.967 に答える
0

ドキュメント内の余分な空白は、ブラウザによって無視されます。ページ レイアウトに問題がある場合、その位置に余分なスペースがあるためではありません。

于 2013-03-18T14:35:42.737 に答える