Question

我正在从Sql Server生成HTML电子邮件，而某些电子邮件将包含一个包含许多行的表。我想实现冻结列标题，以便在滚动数据（在电子邮件内）时，列标题始终可见。我尝试过使用css的许多不同解决方案，但无济于事。我理解Outlook不会识别javascript - 所以我坚持使用css来做到这一点 - 我可以在各种网站上做，但是Outlook 2010没有同样的反应。

我理解Outlook中的css引擎真的很像回溯到2001年。任何人都可以就如何实现这一点提出任何建议。我只对Outlook功能感兴趣，因为这是我们唯一的电子邮件工具。

我尝试使用此代码，该代码适用于jsfiddle - 但不适用于电子邮件：

<style type="text/css">
table, td {
text-align:center;
}

th {
font-weight:bold;
text-align:center;
}


table th {
padding:10px 10px 10px 10px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}

table th:first-child {
text-align: left;
}

table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}

table tr:first-child th:last-child {
border-top-right-radius:3px;
}

table tr {
text-align: center;
}

table td:first-child {
text-align: left;
border-left: 0;
}

table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}

table tr:last-child td {
border-bottom:0;
}

table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}

table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}

table th, table td {
width: 160px;
}

#wrapper {
width: 740px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}

table thead {
position:fixed;
}

</style>

<body>

<div id="wrapper">
<table>

<!-- Table Header -->
<thead>
    <tr>
        <th>Task Details</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Progress</th>
        <th>Vital Task</th>
    </tr>
</thead>
<!-- Table Header -->



<!-- Table Body -->
<tbody>

    <tr>
        <td>Create pretty table design</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>100%</td>
        <td>Yes</td>
    </tr><!-- Table Row -->

    <tr>
        <td>Take the dog for a walk</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>100%</td>
        <td>Yes</td>
    </tr><!-- Darker Table Row -->

    <tr>
        <td>Waste half the day on Twitter</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>20%</td>
        <td>No</td>
    </tr>

    <tr>
        <td>Feel inferior after viewing Dribble</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>80%</td>
        <td>No</td>
    </tr>

    <tr>
        <td>Wince at &quot;to do&quot; list</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>100%</td>
        <td>Yes</td>
    </tr>

    <tr>
        <td>Vow to complete personal project</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>23%</td>
        <td>yes</td>
    </tr>

    <tr>
        <td>Procrastinate</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>80%</td>
        <td>No</td>
    </tr>

    <tr>
        <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>80%</td>
        <td><a href="#inexistent-id">Another</a></td>
    </tr>

</tbody>
<!-- Table Body -->

</table>
</div>

</body>

非常感谢你的帮助，保罗

Answer 1

不幸的是Outlook不支持CSS位置或溢出，所以在CSS中这样做看起来好像不可能。

由于您仅定位到Outlook，因此可以尝试使用VML。这主要是未知的领域，所以不确定你是否能找到有用的东西。查看backgrounds.cm以获取有关如何将VML应用于html电子邮件的示例。如果您尝试这条路线，请告诉我们。

outlook 2010冻结列标题

1 个答案: