如何删除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">

我该如何解决此问题？请建议。

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

答

文档中的额外whitepsace应该被浏览器忽略。如果您的页面布局有问题，则不会由于该位置的额外空间。

喜史蒂夫，感谢您的回复，实际问题，我跟在经历不同的背景。我希望我可以添加一个截图。我的问题更接近[此链接]（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>

如何删除Html5中的Html表格单元格空间？

相关推荐