Как правильно установить таблицу TR для изображения

Question

У меня есть изображение в таблице, но таблица кажется больше, чем изображение для высоты.Как я могу сделать высоту изображения и высоту стола одинаковыми?Мой код, как показано ниже:

<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
  <tbody> 
    <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
      <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 

        <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; "> 
          <tbody> 
            <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
              <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                <div class="mktEditable" id="logo" style="" mktoname="logo">
                  <p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/greeting_header.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
                </div></td> 
            </tr> 
          </tbody> 
        </table> 

      </td> 
    </tr> 
  </tbody> 
</table> 

Я хочу, чтобы высота изображения и высота стола были одинаковыми, чтобы не было лишних интервалов.

Answer 1

Пожалуйста, попробуйте это CSS

img{display:block}
p{margin:0 !important;}

<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
                      <tbody> 
                        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                          <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 

                            <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; "> 
                              <tbody> 
                                <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                                  <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                                    <div class="mktEditable" id="logo" style="" mktoname="logo">
                                      <p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/greeting_header.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
                                    </div></td> 
                                </tr> 
                              </tbody> 
                            </table> 

                          </td> 
                        </tr> 
                      </tbody> 
                    </table> 

Answer 2

Если вы установите ширину изображения равной 100% и просто установите размер td таблицы, вы можете получить изображение и размер таблицы одинаковыми.

<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
  <tbody>
    <tr style="vertical-align:top; text-align:left; padding:0; " align="left">
      <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; "
        align="left" valign="top">

        <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; ">
          <tbody>
            <tr style="vertical-align:top; text-align:left; padding:0; " align="left">
              <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; "
                align="left" valign="top">
                <div class="mktEditable" id="logo" style="" mktoname="logo">
                  <p><img src="https://vignette.wikia.nocookie.net/universeconquest/images/e/e6/Sample.jpg/revision/latest?cb=20171003194302" alt="eO Logo White.png" constrain="true" imagepreview="false" style="width:100%" /></p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

Answer 3

Попробуйте установить встроенную высоту.Ваш img завернут в p