<td> 标签可滚动，只有内联 css

Posted 2023-03-06

【中文标题】<td> 标签可滚动，只有内联 css

【英文标题】：scrollable for <td> tag with only inline css

【发布时间】：2015-10-17 11:50:00

【问题描述】：

我正在尝试让系统通过 phpMailer 发送一封电子邮件，该电子邮件将包含 2 个表格，一个为标题冻结，一个为数据滚动。如果数据不是太多，则不会出现滚动。我把两张桌子放在一张大桌子里，但不管我怎么试，第二张桌子都不能滚动。这是我的结构：

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

我试图用 扭曲第二个表以使其可滚动但它不起作用，所以我认为最好在这里发布我的问题。请帮我 P/s：我只能使用内联 css 来兼容所有电子邮件客户端

我的期望是这样的

【问题讨论】：

不确定我是否按照你的意愿做对了，但你有没有尝试过像这样jsfiddle.net/jpgs59w8

的第二张桌子的固定大小

@HenryVarro 我添加了我的期望表图片

【参考方案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 的宽度以适合您的网站）

【讨论】：

问题是当我调整浏览器窗口的大小时，滚动条的宽度不会改变。我需要它来响应

因为我们固定了包含滚动条的 div 的宽度，如果您可以使用 @media 这样的link

访问 css 文件，它可以响应

我可以在内联 CSS 中使用它吗？我在做什么只允许 CSS 内联：\