web-dev-qa-db-fra.com

Colorer une ligne de tableau avec style = "color: #fff" pour l’afficher dans un email

Nous aimerions afficher les détails de la commande sous forme de tableau dans un email.

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

Nous souhaiterions idéalement que l'en-tête ait la couleur d'arrière-plan "# 5D7B9D" et la couleur de texte "#fff".
Nous utilisons bgcolor='#5D7B9D' pour changer la couleur de fond et ne trouve pas d’autre solution que pour changer la couleur du texte.
Comme la plupart des fournisseurs de messagerie suppriment le CSS, nous ne pouvons pas utiliser l'attribut style.

Les questions sont

  1. Comment faire en sorte que le texte d'en-tête apparaisse en blanc?
  2. Existe-t-il d'autres méthodes?
htmlcsshtml-tablehtml-email
22
naveen

vous pouvez facilement faire comme ça: -

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

Démo: - http://jsfiddle.net/VWdxj/7/

30
Shailender Arora

Pour les modèles de courrier électronique, CSS en ligne est la méthode appropriée pour styler:

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

Essayez d'utiliser le <font> tag

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

Mais je pense que cela devrait fonctionner aussi:

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

Solution crossbrowser:

utilisez des majuscules en couleur HEX.

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

Plutôt que d'utiliser des balises directes, vous pouvez modifier l'attribut css de la couleur afin que les tableaux que vous créez aient le même en-tête de couleur.

thead {
    color: #FFFFFF;
}
1
Reid Svntn