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

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

0 голосов
/ 26 октября 2018

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

<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

Ответы [ 3 ]

0 голосов
/ 26 октября 2018

используйте css класс для td и для каждого тд можно указать inline 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>
0 голосов
/ 26 октября 2018 
 **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>
0 голосов
/ 26 октября 2018 
<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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...