Вот код для согласования контактных данных:
<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
<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. Также мне нужно, чтобы последнее выравнивание текста совпадало с концом зеленого поля.
На самом деле вам не нужно иметь изображение в собственном <TD> .. просто поместите его в том же TD, что и значение .. <td style = 'width: 25%'> <img src = "./ images / Mobile. png "> 832.674.6834 </td>
используйте класс 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
**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>
Пожалуйста, используйте для этого flexbox, а не таблицу.