使用PHP生成适配Gmail的响应式邮件表格

我来帮你搞定这两个问题，先拆解下问题根源，再给你修正后的完整代码：

问题1：大屏视图下缺少表头 #

你原来的表头内容藏在一个display:none的<td>里，只有移动端才会触发显示，导致大屏完全看不到表头。我们需要单独做一个大屏专用表头行，只在宽屏设备展示。

问题2：移动端显示异常 #

原来的移动端CSS布局逻辑没把表头和对应数据正确匹配堆叠，导致显示错乱。我们要调整媒体查询样式，把横向表格转换成移动端友好的垂直列表布局。

修正后的完整PHP代码 #

<?php
// E-mail recipient (Tested on gmail)
$to = "RECIPIENT E-MAIL ADRESS COMES HERE";
$subject = "Responsive table";
$message = '
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<style type="text/css">
/* 大屏样式（宽度大于800px） */
@media only screen and (min-width: 801px) {
    .mobile-header {
        display: none !important;
    }
    .desktop-header {
        display: table-row !important;
    }
    #templateColumns {
        border-collapse: collapse !important;
    }
}

/* 移动端样式（宽度小于等于800px） */
@media only screen and (max-width: 800px) {
    #templateColumns {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .desktop-header {
        display: none !important;
    }
    .mobile-header {
        display: table-cell !important;
        width: 40% !important;
        text-align: left !important;
        font-weight: bold !important;
        padding: 8px !important;
        border: 1px solid #000 !important;
    }
    .templateColumnContainer {
        display: table-cell !important;
        width: 60% !important;
        text-align: left !important;
        padding: 8px !important;
        border: 1px solid #000 !important;
    }
    #templateColumns tr {
        display: table-row !important;
    }
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <!-- 大屏专用表头 -->
    <tr class="desktop-header">
        <th colspan="7" align="center" style="padding:10px;">Employees</th>
    </tr>
    <tr class="desktop-header">
        <th align="center" valign="top" width="12.5%" style="padding:10px;">Employee ID</th>
        <th align="center" valign="top" width="12.5%" style="padding:10px;">Last Name</th>
        <th align="center" valign="top" width="12.5%" style="padding:10px;">First Name</th>
        <th align="center" valign="top" width="12.5%" style="padding:10px;">E-mail</th>
        <th align="center" valign="top" width="12.5%" style="padding:10px;">Office</th>
        <th align="center" valign="top" width="12.5%" style="padding:10px;">Reports to</th>
        <th align="center" valign="top" width="12.5%" style="padding:10px;">Job title</th>
    </tr>

    <!-- 第一行数据 -->
    <tr>
        <!-- 移动端专用表头 -->
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            Employee ID
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">ID-12345</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            Last Name
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">John</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            First Name
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">Doe</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            E-mail
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">a@a.com</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            Office
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">Office 1</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            Reports to
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">Michael</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="center" class="mobile-header" style="display:none;">
            Job title
        </td>
        <td align="center" valign="top" width="12.5%" class="templateColumnContainer">
            <table cellspacing="0" width="100%">
                <tr>
                    <td style="padding:10px;">Librarian</td>
                </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";
// Sender E-mail address
$headers .= 'From: <SENDER E-MAIL ADDRESS COMES HERE>' . "\r\n";
mail($to,$subject,$message,$headers);
?>

关键修改说明 #

• 大屏表头修复：新增.desktop-header类的表头行，只在宽屏设备显示，彻底解决大屏无表头的问题。
• 移动端布局修复：把横向表格拆分为多行，每行对应一个表头+数据项，移动端通过媒体查询让表头和数据以左右单元格形式展示，形成清晰的垂直列表，完美适配Gmail移动端渲染规则。
• 兼容性优化：用!important强制提升样式优先级，确保Gmail能正确识别（Gmail对内嵌CSS支持有限，高优先级样式更可靠），同时补充了内边距样式提升可读性。

内容的提问来源于stack exchange，提问作者user16263876