Question

这是对齐联系人详细信息的代码：

<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

Answer 1

为td使用 css 类，并且对于每个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>

Answer 2

<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

Answer 3

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

表结构的对齐问题

3 个答案: