Gmail的HTML电子邮件中表格的内联样式，并使用PHPMailer发送

Question

I've spent so much time on this and I'm still stumped!

Goal: To apply styles (inline) to table, td, th, p, elements in an html email for Gmail being sent with PHPMailer.

Problem: Inline styles not showing

HTML Code:

<section id="email">
    <table cellspacing="0" cellpadding="25" border="10" style="font-family: Arial, sans-serif; text-align: center;">
    <tbody>
        <tr>
            <th style="border: 1px solid rgb(255, 0, 0);">A</th>
            <th style="border: 1px solid rgb(255, 0, 0);">B</th>
            <th style="border: 1px solid rgb(255, 0, 0);">C</th>
            <th style="border: 1px solid rgb(255, 0, 0);">D</th>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(255, 0, 0);">red</td>
            <td style="border: 1px solid rgb(255, 0, 0);">100</td>
            <td style="border: 1px solid rgb(255, 0, 0);">120</td>
            <td style="border: 1px solid rgb(255, 0, 0);">45</td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(255, 0, 0);">blue</td>
            <td style="border: 1px solid rgb(255, 0, 0);">50</td>
            <td style="border: 1px solid rgb(255, 0, 0);">250</td>
            <td style="border: 1px solid rgb(255, 0, 0);">35</td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(255, 0, 0);">green</td>
            <td style="border: 1px solid rgb(255, 0, 0);">65</td>
            <td style="border: 1px solid rgb(255, 0, 0);">180</td>
            <td style="border: 1px solid rgb(255, 0, 0);">360</td>
        </tr>
    </tbody>
    </table>
<p style="color:#FF0000;font-weight: bold;">I want this text to be bold and red!</p></section>

JS Code:

var data = {
    to:"test@gmail.com",
    from:"<my@email.com>",
    fromName:"me",
    subject:"test html email",
    message: $("#email").html()
};

$.ajax({
    type: "POST",
    url: "email.php",
    data: data,
    success: function(){
        alert("email sent");
    }
});

email.php Code:

<?php
require '../PHPMailer-5.2.9/PHPMailerAutoload.php';

if($_POST){
    $mail = new PHPMailer;
    $mail->From = $_POST['from'];
    $mail->FromName = $_POST['fromName'];
    $mail->addAddress($_POST['to']);     
    $mail->Subject = $_POST['subject'];
    $mail->Body    = $_POST['message'];
    $mail->AltBody = $_POST['messageAlt'];

    $mail->isHTML(true);
    $mail->send();
}
?>

I do receive the email in Gmail with all the data. However, the inline styles in the html are completely ignored.

Thanks in advance to all who take the time to respond!

Answer 1

Ok I managed to figure it out!

There was a problem with my PHP code. The HTML string needed to have the backslashes stripped. First I store the message in the $body variable, strip the slashes with "stripslashes($body)" then attach $body to $mail via "MsgHTML($body)".

Here is the revised PHP:

<?php
require '../PHPMailer-5.2.9/PHPMailerAutoload.php';

if($_POST){
    $mail = new PHPMailer;
    $body = $_POST['message'];
    $body = stripslashes($body);

    $mail->From = $_POST['from'];
    $mail->FromName = $_POST['fromName'];
    $mail->addAddress($_POST['to']);     
    $mail->Subject = $_POST['subject'];
    $mail->MsgHTML($body);
    $mail->AltBody = "Alternate Content";   
    $mail->isHTML(true);

    $mail->send();
?>