代码之家 › 专栏 › 技术社区 › john Gu

如果HTML表的行中包含图像,那么如何最小化图像之间的空白

sharepoint asp.net css html

john Gu · 技术社区 · 6 年前

我知道有一个专门针对sharepoint的论坛,但我的问题更多地与通用CSS&HTML有关,而不是sharepoint。现在,我在一个sharepoint站点中创建了一个aspx页面,我想在一个表中显示一些图像,我选择在一个表中显示这些图像,以保证无论最终用户的屏幕大小,我将始终获得3个图像。

但问题是图像之间会有额外的空间跟随:-

虽然我定义了图像宽度x高度为(60px59px)+表格宽度为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选项中,这似乎是不可能的。

1 回复 | 直到 6 年前

Takit Isy Surendra 6 年前

您可能需要添加 cellpadding=0 和/或 cellspacing=0 在你的 table

<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>