我一直在创建一个网页，以使用fancybox显示一些图像。我建立的表工作正常，除了每行之间有一个空白。
https://codepen.io/michael-wutzke/pen/MWgMwmd
我已经尝试过
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
我只希望每个单元格都没有填充或边框，而无需更改我的fancybox代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/58/04/35/5804350baef289c705d468b924f6c4b5.jpg" data-caption="a" name="ImageA1" /></td>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/8d/c2/11/8dc21159586258c51544784a4d3ff335.jpg"></td>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/26/5b/77/265b77c611b1adc08cefed2fd2fe7139.jpg" data-caption="c-d" name="Image75" /></td>
</tr>
<tr>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/a2/c7/d0/a2c7d0dd41ab3399f55114d956cc8584.jpg " data-caption="D-G " name="ImageC1 " /></td>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/e0/1a/f0/e01af0222cbaf2a6e3e8d93b38e1febc.jpg " data-caption="H-J " name="ImageE1 " /></td>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/42/10/47/4210475852c80fea3db3a0129144dba2.jpg " data-caption="K-M " name="ImageF1 " /></td>
<td></td>
</tr>
<tr>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/3a/a4/f9/3aa4f9942fad628c02c002485e7e864a.jpg " data-caption="M " name="ImageG1 " /></td>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/c1/a0/6a/c1a06afa6aa35a3f68da4495eecbfa57.jpg " data-caption="N-P " name="H1 " /></td>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/ca/a8/08/caa8085a33443bdce3180ab95a036d1a.jpg " data-caption="Q-S " name="ImageI1 " /></td>
</tr>
<tr>
<td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/33/c1/87/33c1872ed68c770608b4c1e3a3ad6481.jpg " data-caption="S " name="ImageI1 " /></td>
<td>
<img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/02/1e/2d/021e2d71d0feda4d59540994f286c8ad.jpg " data-caption=S-U " name="ImageJ1 " /></td>
<td><img style="width: 375px; height: 285px; " alt=" "
src="https://i.pinimg.com/564x/e0/a9/c3/e0a9c3c6979ce6a7bc25d4df50c87e6b.jpg " data-caption="V-Z " name="ImageK1 " /></td>
</tr>
</table>
</body>
</html>
每个浏览器都采用自己的样式，您需要使用Normalize CSS或reset CSS覆盖它的样式>
如果将img标签设置为display: block;，则空白将消失。