if HTML table contain images inside its rows, then how i can minimize the white space between the images

Question

I know there is a forum specifically for sharepoint, but my problem is more related to general CSS & HTML rather than sharepoint. now i created an aspx page inside a sharepoint site, and i want to show a number of images underneath each other, and i chose to show the images inside a table to guarantee that i will always get 3 images per line, regardless of the end user screen size.

But the problem is that the images will have extra spaces between them as follow:-

although i defined the images width x height to be (60px X 59px) + the table width to be 17%, which is the minimum table width i can get. as if i decrement the width to be less than 17% nothing will be minimized. here are the settings for the images and the table:-

here is the markup for my table which contain images:-

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

so can anyone advice how i can minimize the space between the images? as seems inside the available UI options this is not possible.

Thanks

Takit Isy Takit Isy · Accepted Answer · 2018-06-11T11:24:32

You may want to add cellpadding=0 and/or cellspacing=0 on your table in the mark-up:

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

⋅ ⋅ ⋅

Or, using 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>

Hope it helps.

if HTML table contain images inside its rows, then how i can minimize the white space between the images

1 Answers