如果HTML表的行内包含图像，那么我如何才能使图像之间的空白最小化

Question

我知道有一个专门针对共享点的论坛，但是我的问题更多是与常规CSS和HTML有关，而不是共享点。 现在，我在一个共享点站点内创建了一个aspx页面，我想在彼此之间显示许多图像，并且我选择在表内显示图像，以确保无论每行结束，我总是获得3张图像用户屏幕尺寸。

但是问题在于图像之间将有额外的间距，如下所示：

尽管我将图像的宽度x高度定义为（60px X 59px）+表格宽度为17％，这是我可以获得的最小表格宽度。 好像我将宽度减小到小于17％一样，什么也不会最小化。 这是图像和表格的设置：-

这是我的桌子包含图像的标记：-

<table class="ms-rteTable-0" cellspacing="0" style="width: 17%; height: 364px;">    
<tbody>
          <tr class="ms-rteTableEvenRow-0">
             <td class="ms-rteTableEvenCol-0" style="width: 30px; height: 81px;">​<a title="X" href="***" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
             <td class="ms-rteTableOddCol-0" style="width: 30px; height: 81px;">​<a title="" href="*****" target="_blank"><img alt="" src="/Resources/****.png" style="margin: 0px; width: 60px;"/></a></td>
             <td class="ms-rteTableEvenCol-0" style="width: 30px; height: 81px;">​<a name="******" title="" href="***"><img alt="" src="/Resources/Smart%20Support%20Logo.png" style="margin: 0px; width: 60px;"/></a></td>
          </tr>
          <tr class="ms-rteTableOddRow-0">
             <td class="ms-rteTableEvenCol-0" style="width: 30px;">​<a title="t" href="*****" target="_blank"><img alt="" src="/Resources/****.png" _moz_resizing="true" style="margin: 0px; width: 60px;"/></a></td>
             <td class="ms-rteTableOddCol-0" style="width: 30px;">​<a title="" href="h*****" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
             <td class="ms-rteTableEvenCol-0" style="width: 30px;">​<a title="" href="****" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
          </tr>

所以谁能建议我如何最大程度地减少图像之间的空间？ 就像在可用的UI选项中一样，这是不可能的。

谢谢

Answer 1

您可能希望在table中的标记中添加cellpadding=0和/或cellspacing=0 ：

 <table cellpadding=0 cellspacing=0> <tbody> <tr class="ms-rteTableEvenRow-0"> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableOddCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> </tr> <tr class="ms-rteTableOddRow-0"> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableOddCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> </tr> </tbody> </table> 

⋅⋅⋅

或者，使用CSS：

 table { border-collapse: collapse; } table td { margin: 0; padding: 0; } 

 <table> <tbody> <tr class="ms-rteTableEvenRow-0"> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableOddCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> </tr> <tr class="ms-rteTableOddRow-0"> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableOddCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> <td class="ms-rteTableEvenCol-0"> <a><img alt="" src="http://placekitten.com/60/60" /></a> </td> </tr> </tbody> </table> 

希望能帮助到你。