html - 如何关闭图像表中的空间？

Question

这是为了密集显示状态信息。最好我想让图像相互对接。多余的空白从何而来？

生成的表格元素如下所示：

<table>
<tr>
<td><small>anim-dept</small></td>
<td>
  <a href="http://foo/bar">
    <img height="24" width="32" src="http://foo/bar.jpg">
  </a>
</td>
....

Answer 1

在表格的css中使用border-collapse:collapse如下

table{
    border-collapse:collapse;
}

或仅适用于具有 id 的特定表images

table#images{
    border-collapse:collapse;
}

或者（如果你没有 CSS）

<table cellspacing="0">

演示： 没有边框折叠和边框折叠，没有 css 但单元格间距

Answer 2

这可能不是最佳解决方案，但我可以通过添加以下内容来解决此问题：

tr {
    display:inline-block;
    height:24px;
}

cssborder-collapse: collapse似乎只适用于列，行仍然有间距。将行设置为 inline-blocks 而不是 table-rows 似乎可以解决它，尽管正如我所说的那样，它可能不是最好的解决方案。

Answer 3

将TABLE'CELLSPACING和CELLPADDING设置为零。
请注意，您可能需要为第一个表格行单元格添加填充样式。

<table cellspacing="0" cellpadding="0">
<tr>
<td><small>anim-dept</small></td>
<td>
  <a href="http://foo/bar">
    <img height="24" width="32" src="http://foo/bar.jpg">
  </a>
</td>
....