Проблема выравнивания со структурой таблицы

Вот код для согласования контактных данных:

<html>
  <body>
    <table width="900" class="contact-details">
      <tr>
        <td><img src="./images/Mobile.png"></td>
        <td>
          <p>832.674.6834</p>
        </td>
        <td><img src="./images/fax.png"></td>
        <td>
          <p>271.217.4981</p>
        </td>
        <td><img src="./images/email.png"></td>
        <td>
          <p>test@testpineced.com</p>
        </td>
        <td><img src="./images/address.png"></td>
        <td>
          <p>1055 Loremips Tr. Kity, TX</p>
        </td>
      </tr>
    </table>

    <style>
      img {
        /* width: 100%; */
        display: block;
      }
    </style>
  </body>
</html>

Вы можете видеть разницу между изображениями и текстовым контентом. Не могли бы вы помочь мне сделать одинаковую разницу в зазоре и уместить все содержимое внутри класса таблицы.

См. Приложенный скриншот: https://imgur.com/a/tjd9UOo

Пожалуйста, используйте для этого flexbox, а не таблицу.

ReSedano 26.10.2018 14:01
1
1
47
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

<table width="900" class="contact-details" >
    <tr>
        <td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
        <td>832.674.6834</td>
        <td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
        <td>271.217.4981</td>
        <td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
        <td>test@testpineced.com</td>
        <td style='width: 30px'><img  style='width: 30px' src="./images/address.png"></td>
        <td>1055 Loremips Tr. Kity, TX</td>
    </tr>

просто измените ширину в пикселях в соответствии с шириной изображения

Я пробовал, но все равно получаю. См.: imgur.com/a/uu7anr5. Также мне нужно, чтобы последнее выравнивание текста совпадало с концом зеленого поля.

Vishnu 26.10.2018 07:30

На самом деле вам не нужно иметь изображение в собственном <TD> .. просто поместите его в том же TD, что и значение .. <td style = 'width: 25%'> <img src = "./ images / Mobile. png "> 832.674.6834 </td>

Raymond Tey 26.10.2018 11:23
Ответ принят как подходящий

используйте класс css для td, и для каждого td можно указать встроенные width и height

.img {
      background-repeat:no-repeat;
      background-size: cover;
}
<table width="900" class="contact-details">
    <tr>
        <td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
        <td><p>832.674.6834</p></td>
        <td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
        <td><p>271.217.4981</p></td>
        <td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
        <td><p>test@testpineced.com</p></td>
        <td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
        <td><p>1055 Loremips Tr. Kity, TX</p></td>
    </tr>
</table>    

Вместо размера фона: обложка я попробовал background-position, и это сработало. Спасибо за уделенное время Шив Кумар @ shiv-kumar-baghel

Vishnu 27.10.2018 18:54
 **You have to remove width="900" and add padding to <td> element**

 <html>
 <head>
 <style>
  img {
    /* width: 100%; */
    display: block;
  }
  table{
        margin:0 auto;
  }
  td{
    padding-top:5%;
    padding-left: 1%;
  }
 </style>
 </head>
 <body>
 <table  class="contact-details">
  <tr>
    <td><img src="./images/Mobile.png"></td>
    <td>
      <p>832.674.6834</p>
    </td>
    <td><img src="./images/fax.png"></td>
    <td>
      <p>271.217.4981</p>
    </td>
    <td><img src="./images/email.png"></td>
    <td>
      <p>test@testpineced.com</p>
    </td>
    <td><img src="./images/address.png"></td>
    <td>
      <p>1055 Loremips Tr. Kity, TX</p>
    </td>
  </tr>
 </table>


 </body>
 </html>

Другие вопросы по теме