我正在编写HTML简报,由于某些原因,尽管具有相同的像素宽度,但我的img宽度并未扩展td标签的整个宽度。我的图像显示为180,但td标记的宽度为186.下面是我的代码。
<table width="600" bgcolor="#ffffff" height="30" cellpadding="0" cellspacing="0">
<tr >
<td width="10"></td>
<td width="180" height="30" bgcolor="#000000"><p style="text-align:center; color:#ffffff">ALONSOS</p></td>
<td width="10"></td>
<td width="180" bgcolor="#000000"><p style="text-align:center; color:#ffffff">ZEN WEST</p></td>
<td width="10"></td>
<td width="180" bgcolor="#000000"><p style="text-align:center; color:#ffffff">LUCKIE'S TAVERN</p></td>
<td width="10"></td>
<tr>
<td width="10"></td>
<td width="180" height="30" bgcolor="#ffffff"><img src="zenwest.png" width="180"/></td>
<td width="10"></td>
<td width="180" height="30" bgcolor="#000000"><img src="zenwest.png" width="180"/></td>
<td width="10"></td>
<td width="180" bgcolor="#000000"><img src="magerks.png" width="180" /></td>
<td width="10"></td>
</tr>
<tr>
<td width="10"></td>
<td width="180" ><p><b>Saturday, Feb. 9th</b></p>
<p>$3 Bud Light</p>
<p>$4 Soco & Lime</p>
<p>$3 Bud Light</p>
</td>
<td width="10"></td>
<td width="176"><p><b>Saturday, Feb. 9th</b></p>
<p>$3 Bud Light</p>
<p>$4 Soco & Lime</p>
<p>$3 Bud Light</p>
</td>
<td width="10"></td>
<td width="180"><p><b>Saturday, Feb. 9th</b></p>
<p>$3 Bud Light</p>
<p>$4 Soco & Lime</p>
<p>$3 Bud Light</p>
</td>
<td width="10"></td>
</tr>
</table>
答案 0 :(得分:0)
标记中的所有td标记都有“180”宽度。尝试将首选td标记的宽度设置为“186”。
答案 1 :(得分:0)
如果删除表格上的宽度,则间距会以您希望的方式结束。
<table bgcolor="#ffffff" height="30" cellpadding="0" cellspacing="0">
<强> jsFiddle example 强>
答案 2 :(得分:0)
table-cell
宽度类似于display: inline
,因为它不一定尊重提供的宽度,在这种情况下,它取决于表格。表格单元格宽度将增加以适应整个600px
宽表的宽度,从而导致您看到的看似奇怪的行为。您可以增加中间<td>
以使总宽度加起来为600,或者您可以删除表格宽度并将其设置为任何内容(类似580px
)。