如何刪除Html5中的Html表格單元格空間？

我有HTML腳本如下如何刪除Html5中的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 &表之間增加的空間元素，以在下面的代碼的頁面（這我在鉻調試器中檢查）

<td> 
    <table class="headertable">

我該如何解決此問題？請建議。

來源

2013-03-18 Naga

這折騰成[的jsfiddle（http://jsfiddle.net/） – adamb 2013-03-18 14:34:37

文檔中的額外whitepsace應該被瀏覽器忽略。如果您的頁面佈局有問題，則不會由於該位置的額外空間。

來源

2013-03-18 14:35:42 SteveP

喜史蒂夫，感謝您的回覆，實際問題，我跟在經歷不同的背景。我希望我可以添加一個截圖。我的問題更接近[此鏈接]（http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table） – Naga 2013-03-18 15:46:25

This [blog] （http://webdesign.about.com/cs/tables/qt/tiptablespaces.htm）幫助我瞭解我的問題在哪裏。 – Naga 2013-03-18 18:35:54

我通過使用帶浮動屬性的嵌套div來解決此問題。 HTML5不鼓勵嵌套表格進行佈局設計。請參閱this link瞭解更多詳情。謝謝詹妮弗，你做了我的一天。

下面是我的代碼更改

  <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-19 04:04:14 Naga

如何刪除Html5中的Html表格單元格空間？

回答

相關問題