使用 php 在 gmail 电子邮件上生成响应表

编程问答 2022-04-23

问题描述

我想用 PHP 发送响应式表格，我想设法在移动设备上看起来不错，尤其是在 Gmail 上。由于 gmail 不支持所有 CSS 属性，因此创建响应式表格的常用方法在电子邮件中不起作用。所以需要寻找另一种创建响应式表的方法。

我找到了一个可以在 gmail 上使用的解决方案，但我仍然遇到 CSS 问题。

在电子邮件中发送响应表的 PHP 代码：

<?PHP
//E-mail recipient (Tested on gmail)
//$to = "SOMETHING@GMAIL.COM";
$to = "RECIPIENT E-MAIL ADRESS COMES HERE";

$subject = "Responsive table";

$message = '
<html>
<head>
    <Meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1">

    <style type="text/css">
        @media only screen and (max-width: 800px){
            #templateColumns{
                width:100% !important;
            }

            .templateColumnContainer{
                display:block !important;
                width:100% !important;
            }
            .templateColumnContainer table{
                border: 1px !important;
                cellpadding:1px !important;
            }

            .abc{
                display:table-cell !important;
                width:50% !important;
            }
            .leftColumnContent{
                font-size:16px !important;
                line-height:125% !important;
            }
        }
    </style>
</head>
</body>
<table border="1" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <th colspan="7" align="center">Employees</th>
    </tr>
    <tr>

        <td align="left" valign="center" class="abc" style="display:none;">
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    Employee ID
                </tr>
            </table>
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    Last Name
                </tr>
            </table>
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    First Name
                </tr>
            </table>
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    E-mail
                </tr>
            </table>
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    Office
                </tr>
            </table>
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    Reports to
                </tr>
            </table>
            <table border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    Job title
                </tr>
            </table>
        </td>





        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table   cellspacing="0" width="100%">
                <tr>
                    ID-12345
                </tr>
            </table>
        </td>

        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    John
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table  cellspacing="0" width="100%">
                <tr>
                    Doe
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table  cellspacing="0" width="100%">
                <tr>
                    a@a.com
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table  cellspacing="0" width="100%">
                <tr>
                    Office 1
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table  cellspacing="0" width="100%">
                <tr>
                    Michael
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table  cellspacing="0" width="100%">
                <tr>
                    Librarian
                </tr>
            </table>
        </td>

        
    </tr>
</table>

</body>
</html>

';

// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
//Sender E-mail adress
//$headers .= 'From: <info@mywebsite.com>' . "\r\n";
$headers .= 'From: <SENDER E-MAIL ADDRESS COMES HERE>' . "\r\n";

mail($to,$subject,$message,$headers);
?>

我在下图中突出显示了问题：

https://i.ibb.co/4dHsgHq/Mobile-picture.png

我还想将标题行添加到更高的屏幕视图，因为它现在不见了：

https://i.ibb.co/r41jVcp/PC-picture.png

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

emailemailgmailgmailresponsive