если таблица HTML содержит изображения внутри своих строк, то как я могу минимизировать пробел между изображениями

Question

Я знаю, что есть форум специально для sharepoint, но моя проблема больше связана с общим CSS и HTML, чем с sharepoint.Теперь я создал страницу aspx внутри сайта sharepoint, и я хочу показать несколько изображений друг под другом, и я решил показать изображения внутри таблицы, чтобы гарантировать, что я всегда буду получать 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>

Так может ли кто-нибудь посоветовать, как можно уменьшить расстояние между изображениями?как видно из доступных вариантов пользовательского интерфейса, это невозможно.

Спасибо

Answer 1

Вы можете добавить 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>

Надеюсь, это поможет.