html - 仅内联 css 的 <td> 标签可滚动

Question

我正在尝试让一个系统通过 PHPMailer 发送一封包含 2 个表格的电子邮件，一个是卡住的标题，一个是可滚动的数据。如果数据不是太多，则不会出现滚动条。我将 2 个表放在一个大表中，但无论我如何尝试，第二个表都无法滚动。这是我的结构:

<table>
<tr><td><table> ... </table></td>
<td><div style="overflow: auto"><table> .. </table></div></td></tr>
</table>

我尝试用 扭曲第二个表以使其可滚动，但它不起作用，所以我认为最好在此处发布我的问题。请帮我 P/s: 我只能使用inline css来兼容所有的邮件客户端

我的期望是这样的

Answer 1

嗯，我猜是这样的
您只需要为第一个 div 设置固定宽度，然后再创建一个像这样具有更高高度的 div(您有权这样做吗？)

<table>
<tr style="border:none">
    <td style="border: none;">
        <table class="table" style="margin-top:-15px">
            <tr><td>Header1</td></tr>
            <tr><td>Content</td></tr>
            <tr><td>Content</td></tr>
            <tr><td>Content</td></tr>
            <tr><td>Content</td></tr>
        </table>
    </td>
    <td>
        <div style="overflow: auto; width:300px">
            <div style="width:450px">
                <table class="table">
                    <tr>
                        <td>Header2</td>
                        <td>Header3</td>
                        <td>Header4</td>
                        <td>Header5</td>
                        <td>Header6</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                </table>
            </div>
        </div>
    </td>
</tr>

您可以在这里看到完整的演示 Link (只是演示，您需要自己测量两个 div 的宽度以适合您的网站)