Question

我有以下HTML：

<table width="700" align="center" style="border:0">
    <tr style="border:0"> <td> <img src="images\1.png" /> </td></tr>
    <tr style="border:0"> <td> <img src="images\2.png" /> </td> </tr>
    <tr style="border:0"> <td> <img src="images\3.png" /></td> </tr>
    <tr style="border:0"> <td> <img src="images\4.png" /> </td></tr>
    <tr style="border:0"> <td> <img src="images\5.png" /> </td></tr>
    <tr style="border:0"> <td> <img src="images\6.png" /> </td></tr>
</table>

问题是图像之间出现了空白区域。如何删除它？

Answer 1

<table width="700" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr><td> <img src="images\1.png" /></td></tr>
        <tr><td> <img src="images\2.png" /></td></tr>
        <tr><td> <img src="images\3.png" /></td></tr>
        <tr><td> <img src="images\4.png" /></td></tr>
        <tr><td> <img src="images\5.png" /></td></tr>
        <tr><td> <img src="images\6.png" /></td></tr>
    </table>

Answer 2

首先将cellspacing =“0”cellpadding =“0”添加到您的表格元素

  <table width="700" align="center" style="border:0" cellspacing="0" cellpadding="0">

并删除td和img标记之间的空格

Answer 3

你可以尝试不使用表格，所以你有......

<img src="images/1.png" />
...
<img src="images/6.png />

并使用一些css使它们成为没有边距/填充的块元素

或者你可以在你的桌子上使用css ......

<style>
    table { border-collapse: collapse; }
</style>

您还需要在表格中添加几个属性

<table .... cellspacing="0" cellpadding="0" ...>

所有人都试图摆脱桌面上的padding.margin。

但IMO对于您要做的事情，使用css直接<img />标记路径会更好。

Answer 4

<table cellspacing="0">

应该解决它：）

Answer 5

将<td> <img src="images\1.png" /> </td></tr>更改为<td><img src="images\1.png" /></td></tr>，将cellspacing和cellpadding设置为0，然后检查

Answer 6

添加到您的风格

border-spacing:0px;

Answer 7

您如何存档数据？想到服务器？

在某些文本编辑器中，您可以使用正则表达式进行搜索。然后你可以这样做：

搜索：

<td>(\s*)(.*?)(\s*)</td>

替换：

<td>$2</td>

搜索：

<td>[WHITE SPACE IF ANY]STRING[WHITE SPACE IF ANY]</td>

并替换为：

<td>STRING</td>

Answer 8

对于Transitional Doctype，互联网上的大多数建议解决方案都有效。

但是对于Strict Doctype，以下内容将删除<TD>中两个图片之间的白线：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<title>Test</title>

</head>    
<body>

<table cellspacing="0" cellpadding="0">

<tr><td><img style="display:block;" src="../images/test_blue.jpg"></td></tr>

<tr><td><img style="display:block;" src="../images/test_green.jpg"></td></tr>

</table>

</body>
</html>

想在此处发布屏幕截图，但信誉不足以发布。

Answer 9

删除作为博客一部分的表格中图片之间出现的空格：

对于那些在博客上遇到此问题后来到这里的人。我遇到了同样的问题。然而，我的桌子是博客博客的一部分。我在桌子的一个单元格中都有图像。我尝试过cellspacing，cellpadding和许多其他属性和参数，但没有任何效果。对于博客，在博客模板中进行了以下更改：

在“.post-body img”下填充“padding：10px”更改为“padding：0px”[这删除了图像之间的垂直空间]
在“line-height：1.4;”的“.post-body”值下改为“line-height：0;” [这删除了表格行之间的空间]

这里有更详细的答案：

http://xomisse.com/blog/tutorial-remove-spaces-between-images-in-blogger/

Answer 10

尝试：

display:inline-block;
vertical-align:top;

Answer 11

有些移动浏览器可能会在没有width和height属性的图像之间创建空白。将图片尺寸设置为td，然后将图片的宽高比设置为100％高100％。

<table width="700" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr><td width="100" height="100"> <img src="images\1.png" /></td></tr>
    <tr><td width="100" height="100"> <img src="images\2.png" /></td></tr>
    <tr><td width="100" height="100"> <img src="images\3.png" /></td></tr>
    <tr><td width="100" height="100"> <img src="images\4.png" /></td></tr>
    <tr><td width="100" height="100"> <img src="images\5.png" /></td></tr>
    <tr><td width="100" height="100"> <img src="images\6.png" /></td></tr>
</table>

<style>
    table td img { width:100%; height:100%; }
</style>

出现在表格中的图像之间的空白区域

11 个答案: