27

注文の詳細を表としてメールで表示したい

​<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. 別の方法はありますか？
4

4 に答える 4

38

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

<thead>
    <tr style="color: #fff; background: black;">
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
于 2012-04-20T13:11:26.400 に答える
35

あなたはこのように簡単に行うことができます：-

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

于 2012-04-20T12:18:06.253 に答える
5

<font>タグを使用してみてください

​&lt;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>

しかし、これもうまくいくはずだと思います。

​&lt;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>
于 2012-04-20T12:04:32.523 に答える
1

直接タグを使用する代わりに、色のcss属性を編集して、作成するすべてのテーブルが同じ色のヘッダーテキストを持つようにすることができます。

thead {
    color: #FFFFFF;
}
于 2017-08-08T19:12:18.113 に答える