Цвет строки таблицы со стилем = "color: #fff" для отображения по электронной почте

Мы хотели бы отобразить детали заказа как таблицу в электронном письме

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>

В идеале мы хотим, чтобы заголовок имел фоновый цвет как "# 5D7B9D" и текстовый цвет как "#fff".
Мы используем bgcolor='#5D7B9D' для изменения фона и не можем найти альтернативу, чтобы сделать то же самое для изменения текстового цвета.
Поскольку большинство провайдеров электронной почты линяют CSS, мы не можем использовать атрибут style вообще.

Вопросы:

Как сделать текст заголовка белым?
Есть ли альтернативные методы?

Ответ 1

вы можете легко сделать следующее: -

    <table>
    <thead>
        <tr>
          <th bgcolor="#5D7B9D"><font color="#fff">Header 1</font></th>
          <th bgcolor="#5D7B9D"><font color="#fff">Header 2</font></th>
           <th bgcolor="#5D7B9D"><font color="#fff">Header 3</font></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>

Демо: - http://jsfiddle.net/VWdxj/7/

Ответ 2

Для шаблонов электронной почты встроенный CSS является правильно используемым методом для стилей:

<thead>
    <tr style="color: #fff; background: black;">
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>

Ответ 3

Попробуйте использовать тег <font>

<table> 
    <thead> 
        <tr> 
            <th><font color="#FFF">Header 1</font></th> 
            <th><font color="#FFF">Header 1</font></th> 
            <th><font color="#FFF">Header 1</font></th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>blah blah</td> 
            <td>blah blah</td> 
            <td>blah blah</td> 
        </tr> 
    </tbody> 
</table>

Но я думаю, что это тоже должно работать:

<table> 
    <thead> 
        <tr> 
            <th color="#FFF">Header 1</th> 
            <th color="#FFF">Header 1</th> 
            <th color="#FFF">Header 1</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>blah blah</td> 
            <td>blah blah</td> 
            <td>blah blah</td> 
        </tr> 
    </tbody> 
</table>

EDIT:

Решение Crossbrowser:

использовать капители в HEX-цвете.

<th bgcolor="#5D7B9D" color="#FFFFFF"><font color="#FFFFFF">Header 1</font></th>

Ответ 4

Вместо использования прямых тегов вы можете отредактировать атрибут css для цвета, чтобы любые сделанные вами таблицы имели одинаковый текст заголовка цвета.

thead {
    color: #FFFFFF;
}