Question

这是我的代码，如果您尝试它，它在这种形式下运行良好。

<table style="width=183; heigth:200; margin: 0; padding: 0; border: 0; border-collapse: collapse;" >
<tr>
<td rowspan="1" colspan="2" style="width:14px; height:60px; padding:0;"><img src="http://www.pcutile.it/images/box_1x1.jpg" style="width:14px; height:60px; border:0;" alt=""/></td>
<td colspan="1" rowspan="1" style="width:152px; height:60px; padding:0;"><img src="http://www.pcutile.it/images/box_1x2.jpg" style="width:152px; height:60px; border:0;"  alt=""/></td>
<td colspan="1" rowspan="1" style="width:17px; height:60px; padding:0; "><img  src="http://www.pcutile.it/images/box_1x3.jpg" style="width=17px; height:60px; border:0;"  alt=""/></td>
</tr>

<tr>
<td rowspan="1" colspan="2" style="width:14px; height:90px; padding:0; vertical-align:top; border:0; background-image:url(http://www.pcutile.it/images/box_2x1.jpg); background-position:top border: 0; background-repeat:repeat-y;"></td>
<td colspan="1" rowspan="1" style="width:152px; height:90px; vertical-align:top; border:0; background-color: #feed01; padding:0; " ></td>
<td rowspan="1" colspan="1" style="width:17px; height:90px; padding:0; vertical-align:top; border:0; background-image:url(http://www.pcutile.it/images/box_2x3.jpg); background-position:top border: 0; background-repeat:repeat-y;"></td>
</tr>

<tr>
<td rowspan="1" colspan="2" style="width:14px; height:6px; padding:0;"><img src="http://www.pcutile.it/images/box_3x1.jpg" style="width:14px; height:6px; border:0;" alt="" /></td>
<td rowspan="1" colspan="1" style="width:152px; height:6px; padding: 0;"><img src="http://www.pcutile.it/images/box_3x2.jpg" style="width:152px; height:6px; border:0;" alt="" /></td>
<td rowspan="1" colspan="1" style="width:17px; height6px; padding:0;"><img src="http://www.pcutile.it/images/box_3x3.jpg" style="width:17px; height:6px; border:0;"  alt="" /></td>
</tr>

<tr>
<td colspan="1" rowspan="1" style="width:13px; height:58px; padding:0;"><img src="http://www.pcutile.it/images/box_4x1.jpg" style="width:13px; height:58px border:0;" alt="" /></td>
<td rowspan="1" colspan="2" style="width:153px; height:58px; padding:0;"><img src="http://www.pcutile.it/images/box_4x2.jpg" style="width:153px; height:58px border:0;" alt="" /></td>
<td rowspan="1" colspan="1" style="width:17px; height:58px; padding:0;"><img src="http://www.pcutile.it/images/box_4x3.jpg" style="width:17px; height:58px; border:0;" alt="" /></td>
</tr>

<tr>
<td style="width:13px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:13px; height:1px; border:0;" alt=""/></td>
<td style="width:1px; height:1px; padding:0;"><img  src="http://www.pcutile.it/images/blank.gif" style="width:1px; height:1px; border:0;" alt=""/></td>
<td style="width:152px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:152px; height:1px; border:0;" alt=""/></td>
<td style="width:17px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:17px; height:1px border:0;" alt=""/></td>
</tr>
</table>

一切似乎都没问题，但是当我将它插入cubecart的模板中时，它会在表格的单元格之间显示相同的奇怪空白。谁知道为什么？您可以在http://www.pcutile.it

中查看

Answer 1

我看了一下你的代码，我找到了几种方法来解决你的问题。我假设您使用的是HTML5 DOCTYPE。此DOCTYPE以不同方式呈现图像，并导致表格行之间的空间。

您可以选择以下选项：

将DOCTYPE更改为： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

或者，如果由于某种原因需要保留此doctype，可以使用以下方法之一来解决问题。

将 display:block;添加到代码中的每个图片代码

将 line-height:0;添加到表格的样式中。

Answer 2

添加到您的表格cellspacing="0" cellpadding="0"应该有所帮助：

<table cellspacing="0" cellpadding="0" style="width=183; heigth:200; margin: 0; padding: 0; border: 0; border-collapse: collapse;" >

html表显示cubecart电子商务中的单元格之间的空白区域

2 个答案: