web-dev-qa-db-ja.com

メールに表示するために、style = "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. ヘッダーテキストを白で表示する方法は？
  2. 他の方法はありますか？
htmlcsshtml-tablehtml-email
22
naveen

このように簡単にできます：

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

30
Shailender Arora

メールテンプレートの場合、インラインCSSはスタイル設定に適切に使用される方法です。

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

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

編集：

クロスブラウザソリューション：

hEXカラーの大文字を使用します。

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

直接タグを使用するのではなく、色のcss属性を編集して、作成するテーブルに同じ色のヘッダーテキストを設定できます。

thead {
    color: #FFFFFF;
}
1
Reid Svntn