1

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

<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.pcutil.it中看到它

4

2 回答 2

1

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

您可以在以下选项之间进行选择：

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

或者，如果您出于某种原因需要保留此文档类型，您可以使用以下方法之一来解决您的问题。

添加： display:block; 到代码中的每个图像标签

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

于 2013-10-20T03:53:13.403 回答
0

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

<table cellspacing="0" cellpadding="0" style="width=183; heigth:200; margin: 0; padding: 0; border: 0; border-collapse: collapse;" >
于 2013-10-19T13:32:33.430 回答