Удалить интервал между ячейками таблицы и строками - PullRequest
Новая
       34

Удалить интервал между ячейками таблицы и строками

45 голосов
/ 12 декабря 2011

Я разрабатываю шаблон электронной почты в формате HTML, который заставляет меня использовать таблицы .В приведенном ниже коде у меня возникают проблемы (1) удаление пробела под изображением-заполнителем и (2) удаление пробела между изображением и подписью.Вот снимок экрана того, как это выглядит в Chrome 15 на OS X 10.6.8 .:

enter image description here

<!DOCTYPE HTML>
<html>
<head>
    <title>Email Template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
        <tr>
            <td id="main" style="background-color: #f2f2f2;">
                <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
                <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
                    <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
                    <tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
                </table><!--/.main-story-image-->
                <p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
                <p><a href="">Click here to read more </a></p>
                <div style="clear: both;"></div>
            </td><!--/#main-->
        </tr>
    </table>
</body>
</html>

Красные границы есть только для того, чтобы показать контуры ячеек.Я не хочу, чтобы они были там в финальной версии.

Ответы [ 10 ]

59 голосов
/ 13 декабря 2011

Похоже, что DOCTYPE заставляет изображение отображаться как встроенный элемент. Если я добавлю display: block к изображению, проблема решена.

49 голосов
/ 12 декабря 2011

Добавьте border-collapse: collapse в значение атрибута style элемента inner table. В качестве альтернативы вы можете добавить атрибут cellspacing=0, но тогда у вас будет двойная граница между ячейками.

т.е:. 

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
9 голосов
/ 12 декабря 2011

У вас есть cellspacing="0" дважды, попробуйте заменить второй на cellpadding="0".

6 голосов
/ 21 июля 2017

У меня была похожая проблема. Это помогает мне в основных почтовых клиентах. Добавить:

  • атрибуты cellpadding="0", cellspacing="0" и border="0" для таблиц
  • стиль border-collapse: collapse; к столам
  • стили padding: 0; margin: 0; для каждого элемента
  • и стили font-size: 0px; line-height: 0px; для каждого пустого элемента
5 голосов
/ 02 октября 2013

Ничего не сработало.Решение проблемы: 

<style>
table td {
    padding: 0;
}
</style>
4 голосов
/ 02 июля 2015

Используется font-size:0 в родительском TD, который имеет изображение.

2 голосов
/ 13 сентября 2014

У меня была похожая проблема, и я решил ее (встроенный), стилизовав элемент td следующим образом: 

<td style="display: block;">

Это будет работать, хотя это не лучшая практика.В моем случае я работал над старым шаблоном, который был стилизован с использованием таблиц HTML.

1 голос
/ 07 мая 2013

Поместите display:block на css для ячейки, и valign="top", который должен добиться цели

1 голос
/ 12 декабря 2011

Привет, как @andrew упомянул make cellpadding = 0, у вас все еще может быть место, когда вы используете table border=1.

0 голосов
/ 03 октября 2017

Если поле с надписью серого цвета, вы можете попробовать обернуть изображение и заголовок в элемент div с тем же фоновым цветом, что и серый, поэтому тег «div» перед тегом «tr» ... Это замаскируетразрыв, потому что вместо белого он будет серым и будет выглядеть как часть серого заголовка.

...