Способ центрировать ТД в ТР? - PullRequest
Новая
       10

Способ центрировать ТД в ТР?

4 голосов
/ 28 декабря 2011

Я работаю над электронной почтой в формате HTML и пытаюсь центрировать зеленый TD в белом TR, чтобы слева и справа от зеленого поля располагалось поле белого цвета в 20px.

Я попытался установить ширину TD длязеленая часть и установка поля 0 автоматически, но зеленый просто расширяется до ширины TR.

Попытка вставить еще 2 TD, чтобы протолкнуть зеленый TD в центр, и это тоже не сработало.

Включая фрагмент кода, у меня возникли проблемы с TR с # a6d971. 

<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
    <tbody>
        <tr>
            <td style="margin: 0 auto;">
                <img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
            </td>
        </tr>
        <tr bgcolor="#fff" height="75">
            <td valign="top" style="text-align:center;">
                <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
                    Regular sales happen every day
                </p>
                <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
                    9am - 11pm
                </p>
            </td>
        </tr>


        <tr bgcolor="#fff" height="75" padding="10">
            <td bgcolor="#000" width="20"></td>
            <td bgcolor="#a6d971" width="300" style="margin: 10;">
            </td>
            <td bgcolor="#000" width="20"></td>
        </tr>



        <tr bgcolor="#fff">
            <td valign="top">
                <table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
                    <tbody>
                        <tr>
                            <td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
                                <h3>Nine @ Nine</h3>
                                <p>Fuel up! Dresses, tunics and other items including:</p>
                            </td>
                        </tr>




                        <tr>

                        </tr>

                    </tbody>
                </table>
            </td>
        </tr>


        <tr>
            <td style="margin: 0 auto;">
                <img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
            </td>
        </tr>
    </tbody>
</table>

Ответы [ 5 ]

3 голосов
/ 28 декабря 2011

Переключитесь на DIV и CSS, большинство клиентов электронной почты поддерживают стили довольно хорошо, вы можете использовать DIV внутри вашего элемента TD, его будет легко центрировать или делать другие вещи, которые вы можете захотеть.

Например 

<tr style="background-color: white;">
  <td  style="background-color: green;">
    <div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
  </td>
</tr>

Также обратите внимание, что если вы используете DIV, вы также можете избегать таблиц.

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

Взломать поверх взлома. 

<table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
                This is stuff.
            </td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/zy6GU/

Кстати, то же самое должно работать с DIV: 

<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>

http://jsfiddle.net/zy6GU/1/

0 голосов
/ 28 декабря 2011

Я не эксперт по CSS, но это работает для меня (без лишних тегов): 

<table>
  <tr style="background-color: white; border: 1px solid black;">
    <td style="background-color: green; display: block; margin: 0 20px;">
      <!-- Content -->
    </td>
  </tr>
</table>
0 голосов
/ 28 декабря 2011

О чем вы говорите «для электронных писем»?Вы имеете в виду адрес электронной почты, например <a href="mailto:somewhere@domain.com">Email Me</a>?Если это так, вам понадобится CSS, который центрирует связь в TD, или в сочетании с colspan на TD.

0 голосов
/ 28 декабря 2011

Если вы ДОЛЖНЫ использовать таблицы, то можете также немного злоупотреблять ими: 

<table><tr align="center">
    <td width="50%">one</td>
    <td style="background-color:green">two</td>
    <td width="50%">three</td>
</tr></table>

http://jsfiddle.net/mblase75/yntfu/

...