时间戳

首页 > 解决方案 > 如果 HTML 表在其行内包含图像，那么我如何最小化图像之间的空白

html - 如果 HTML 表在其行内包含图像，那么我如何最小化图像之间的空白

问题描述

我知道有一个专门针对 sharepoint 的论坛，但我的问题更多地与一般 CSS 和 HTML 相关，而不是 sharepoint。现在我在一个共享点站点内创建了一个 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;">​&lt;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;">​&lt;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;">​&lt;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;">​&lt;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;">​&lt;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;">​&lt;a title="" href="****" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
          </tr>

那么任何人都可以建议我如何最小化图像之间的空间吗？在可用的 UI 选项中似乎这是不可能的。

谢谢

标签： htmlcssasp.netsharepoint

解决方案

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

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

⋅ ⋅ ⋅</p>

或者，使用 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>

希望能帮助到你。

推荐阅读