html - 仅用内联css滚动标记

html - 仅用内联css滚动标记,第1张

我正在尝试让系统通过PHPMailer发送一封电子邮件,该电子邮件将包含2个表格,其中一个表格已冻结,另一个表格可滚动显示数据。如果数据不是太多,则滚动不会出现。我将2张桌子放在一张大桌子里,但无论我怎么做,第二张桌子都不能滚动。这是我的结构:

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

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

我的期望是这样的

html - 仅用内联css滚动标记,enter image description here,第2张

最佳答案:

1 个答案:

答案 0 :(得分: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的宽度以适合你的网站)

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复