如何删除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">
我该如何解决此问题?请建议。
答
文档中的额外whitepsace应该被浏览器忽略。如果您的页面布局有问题,则不会由于该位置的额外空间。
答
我通过使用带浮动属性的嵌套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>
这折腾成[的jsfiddle(http://jsfiddle.net/) – adamb 2013-03-18 14:34:37