2013-12-09 96 views
0

我從Sql Server生成HTML電子郵件和一些電子郵件將包含一個表,許多行。我想實施凍結的列標題,以便滾動數據時(在電子郵件內),列標題始終保持可見。我嘗試了許多不同的解決方案,使用CSS,無濟於事。我瞭解Outlook不會識別JavaScript - 所以我堅持使用CSS來做到這一點 - 我可以在各種網站上做到這一點,但Outlook 2010的反應方式並不相同。展望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> 

感謝這麼多的幫助, 保羅

+0

爲什麼不發送受保護的excel文件? –

+0

我現在發送一個鏈接到excel文件,裏面有凍結的窗格。不幸的是,用戶似乎並不想打開鏈接。我需要在電子郵件正文中包含內容,因此對他們來說非常簡單。 – user3082867

回答

0

不幸的是Outlook不支持CSS位置或溢出,所以在CSS中這樣做看起來好像不可能。

因爲您只針對Outlook,所以您可以嘗試使用VML。這大都是未知的領域,所以不確定你是否能找到有效的東西。查看backgrounds.cm,瞭解如何將VML應用於html電子郵件。讓我們知道如何嘗試這條路線。

+0

好的,謝謝John,我以前用VML編寫過經典的asp代碼,然後用excel打開網站。如果我能做些事情,我一定會回覆。 – user3082867