2013-12-09 6 views
0

SQL Server에서 HTML 전자 메일을 생성 중이며 일부 전자 메일에는 많은 행이 포함 된 테이블이 포함됩니다. 고정 된 열 머리글을 구현하여 전자 메일 내부의 데이터를 스크롤 할 때 열 머리글이 항상 표시되도록합니다. 나는 CSS를 사용하여 많은 다른 솔루션을 시도했지만 아무 소용이 없습니다. 나는 Outlook이 javascript를 인식하지 못한다는 것을 이해합니다 - 그래서 저는 CSS를 사용하여 여러 웹 사이트에서 할 수 있지만 Outlook 2010은 같은 방식으로 반응하지 않습니다.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> 
어떤 도움을 너무 많이

감사합니다, 폴

+0

보호 된 Excel 문서를 보내지 않는 이유는 무엇입니까? –

+0

고정 된 창이있는 파일을 지금 Excel로 보내는 링크를 보내고 있습니다. 불행히도 사용자는 링크를 열지 않으려 고합니다. 전자 메일 본문에 콘텐츠가 있어야하므로 쉽게 볼 수 있습니다. – user3082867

답변

0

불행하게도 Outlook을 지원하지 않습니다 CSS 위치 또는 오버플로가 있으므로 CSS에서 가능하지 않은 것처럼 보입니다.

Outlook 만 타겟팅하기 때문에 VML을 사용해보세요. 그것은 대부분 미지의 영역이므로, 작동하는 것을 찾을 수 있는지 확실하지 않습니다. VML을 HTML 이메일에 적용하는 방법에 대한 예는 backgrounds.cm을 확인하십시오. 당신이 그 길을 시도한다면 어떻게되는지 알려주세요.

+0

감사합니다. John, 고전적인 ASP 코드를 작성한 다음 Excel을 사용하여 웹 사이트를 열 때 VML을 사용 해본 적이 있습니다. 뭔가 일을 할 수 있다면 답장을 보내 드리겠습니다. – user3082867