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

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

<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>[email protected]</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
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
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>[email protected]</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>[email protected]</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>[email protected]</p>
    </td>
    <td><img src = "./images/address.png"></td>
    <td>
      <p>1055 Loremips Tr. Kity, TX</p>
    </td>
  </tr>
 </table>


 </body>
 </html>

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