Question

我将SQL服务器查询输出格式化为HTML表格，该表格使用sp_send_dbmail存储过程通过电子邮件发送到Outlook。问题是“table style =”table-layout：fixed“和”td width =“xx”“属性被忽略，列宽取决于第一行中存在的数据内容（不是标题标题）以下输出显示了这种失真（在第4列中最容易看到）：

Column Widths for Person 1's Data

VS

Column Widths for Person's 2 Data

在SQL Server中打印@ body_with_data2会产生以下HTML输出：

<div style="color:Black; font-size:11pt; font-family:Calibri; width:100px;">
  <html>
  <head>
    <style>
      td {
        border: solid black 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 11pt;
      }

    </style>
  </head>

  <body>
    <div style="margin-top:20px; margin-left:5px; margin-bottom:15px; font-weight:bold; font-size:1.3em; font-family:calibri;">Title Person Name 2</div>
    <div style="margin-left:5px; font-family:Calibri;">
      <table style="table-layout:fixed;" width="100%" cellpadding=0 cellspacing=0 border=0>
        <tr bgcolor=#4b6c9e>
          <td width="60" align=center><font face="calibri" color=White><b>Column 1 Header Name</b></font></td>
          <td width="120" align=center><font face="calibri" color=White><b>Column 2 Header Name</b></font></td>
          <td width="120" align=center><font face="calibri" color=White><b>Column 3 Header Name</b></font></td>
          <td width="375" align=center><font face="calibri" color=White><b>Column 4 Header Name</b></font></td>
          <td width="175" align=center><font face="calibri" color=White><b>Column 5 Header Name</b></font></td>
          <td width="175" align=center><font face="calibri" color=White><b>Column 6 Header Name</b></font></td>
          <td width="175" align=center><font face="calibri" color=White><b>Column 7 Header Name</b></font></td>
        </tr>
        <tr bgcolor=#EEEEF4>
          <td align=center><font face="calibri"><a href="http://linktoIDs.com/7604/">7604</a></font></td>
          <td align=center><font face="calibri">Test Person 1</font></td>
          <td align=center><font face="calibri">01/01/2017</font></td>
          <td align=center><font face="calibri">Test Description Test Description Test Description</font></td>
          <td align=center><font face="calibri"></font></td>
          <td align=center><font face="calibri">Test Description 2</font></td>
          <td align=center><font face="calibri">Test Description 3</font></td>
        </tr>
      </table>
    </div>
  </body>

  </html>
</div>

查看关联的Outlook电子邮件的源HTML代码确实略有不同：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><div style="color:Black; font-size:11pt; font-family:Calibri; width:100px;"><html><head><style>td {border: solid black 1px;padding-left:5px;padding-right:5px;padding-top:1px;padding-bottom:1px;font-size:11pt;} </style></head><body><div style="margin-top:20px; margin-left:5px; margin-bottom:15px; font-weight:bold; font-size:1.3em; font-family:calibri;">Title Person Name 2</div><div style="margin-left:5px; font-family:Calibri;"><table style="table-layout:fixed;" width="100%" cellpadding="0" cellspacing="0" border="0"><tr bgcolor="#4b6c9e"><td width="60" align="center"><font face="calibri" color="White"><b>Column 1 Header Name</b></font></td><td width="120" align="center"><font face="calibri" color="White"><b>Column 2 Header Name</b></font></td><td width="120" align="center"><font face="calibri" color="White"><b>Column 3 Header Name</b></font></td><td width="375" align="center"><font face="calibri" color="White"><b>Column 4 Header Name</b></font></td><td width="175" align="center"><font face="calibri" color="White"><b>Column 5 Header Name</b></font></td><td width="175" align="center"><font face="calibri" color="White"><b>Column 6 Header Name</b></font></td><td width="175" align="center"><font face="calibri" color="White"><b>Column 7 Header Name</b></font></td></tr><tr bgcolor="#EEEEF4"><td align="center"><font face="calibri"><a href="http://linktoIDs.com/7604/">7604</a></font></td><td align="center"><font face="calibri">Test Person 1</font></td><td align="center"><font face="calibri">01/01/2017</font></td><td align="center"><font face="calibri">Test Description Test Description Test Description</font></td><td align="center"><font face="calibri"></font></td><td align="center"><font face="calibri">Test Description 2</font></td><td align="center"><font face="calibri">Test Description 3</font></td></tr></table></div></body></html></div>

删除width =“100％”无法解决问题。相关的HTML输出如下所示：

<div style="color:Black; font-size:11pt; font-family:Calibri; width:100px;"><html><head><style>
td {
border: solid black 1px;
padding-left:5px;
padding-right:5px;
padding-top:1px;
padding-bottom:1px;
font-size:11pt;
}
</style></head><body>
<div style="margin-top:20px; margin-left:5px; margin-bottom:15px; font-weight:bold; font-size:1.3em; font-family:calibri;">Title Person Name 2</div>
<div style="margin-left:5px; font-family:Calibri;">
  <table style="table-layout:fixed;" cellpadding=0 cellspacing=0 border=0>
    <tr bgcolor=#4b6c9e>
      <td width="60" align=center><font face="calibri" color=White><b>Column 1 Header Name</b></font></td>
      <td width="120" align=center><font face="calibri" color=White><b>Column 2 Header Name</b></font></td>
      <td width="120" align=center><font face="calibri" color=White><b>Column 3 Header Name</b></font></td>
      <td width="375" align=center><font face="calibri" color=White><b>Column 4 Header Name</b></font></td>
      <td width="175" align=center><font face="calibri" color=White><b>Column 5 Header Name</b></font></td>
      <td width="175" align=center><font face="calibri" color=White><b>Column 6 Header Name</b></font></td>
      <td width="175" align=center><font face="calibri" color=White><b>Column 7 Header Name</b></font></td>

      </tr>
      <tr bgcolor=#EEEEF4>
        <td align=center><font face="calibri"><a href="http://linktoIDs.com/7604/">7604</a></font></td>
        <td align=center><font face="calibri">Test Person 1</font></td>
        <td align=center><font face="calibri">01/01/2017</font></td>
        <td align=center><font face="calibri">Test Description</font></td>
        <td align=center><font face="calibri"></font></td>
        <td align=center><font face="calibri">Test Description 2</font></td>
        <td align=center><font face="calibri">Test Description 3</font></td>

      </tr>
    </table>
</div>

有关如何将列宽设置为预定义大小的任何建议都将非常感激。查询的相关部分将复制到下面。

IF(EXISTS(SELECT ID FROM #TEMP2))
            BEGIN

                set @textTitle = 'Title'+@PERSON_NAME

                set @body_with_data2 = '<html><head><style>' +
                   'td {border: solid black 1px;padding-left:5px;padding-right:5px;padding-top:1px;padding-bottom:1px;font-size:11pt;} ' +
                   '</style></head><body>' +
                   '<div style="margin-top:20px; margin-left:5px; margin-bottom:15px; font-weight:bold; font-size:1.3em; font-family:calibri;">' +
                   @textTitle + '</div>' +
                   '<div style="margin-left:5px; font-family:Calibri;"><table style="table-layout:fixed;" width="100%" cellpadding=0 cellspacing=0 border=0>' +
                   '<tr bgcolor=#4b6c9e>' +
                   '<td width="60" align=center><font face="calibri" color=White><b>Column 1 Header Name</b></font></td>' +    
                   '<td width="120" align=center><font face="calibri" color=White><b>Column 2 Header Name</b></font></td>' +    
                   '<td width="120" align=center><font face="calibri" color=White><b>Column 3 Header Name</b></font></td>' +    
                   '<td width="375" align=center><font face="calibri" color=White><b>Column 4 Header Name</b></font></td>' +     
                   '<td width="175" align=center><font face="calibri" color=White><b>Column 5 Header Name</b></font></td>' +    
                   '<td width="175" align=center><font face="calibri" color=White><b>Column 6 Header Name</b></font></td>' +    
                   '<td width="175" align=center><font face="calibri" color=White><b>Column 7 Header Name</b></font></td></tr>'   

                set @body=''
                select @body =
                (
                   select ROW_NUMBER() over(order by [ID]) % 2 as TRRow,
                           td = CAST('<a href="' + 'http://linktoIDs.com/' + CAST([ID] AS varchar(10)) + '/">'+CAST([ID] AS varchar(10))+'</a>' AS XML), 
                           td = [Col_2_Data],      
                           td = [Col_3_Data],      
                           td = [Col_4_Data],     
                           td = [Col_5_Data],     
                           td = [Col_6_Data],     
                           td = [Col_7_Data]      
                  FROM #TEMP2
                  ORDER BY [ID] DESC

                   for XML raw('tr'), elements
                )

                set @body = REPLACE(@body, '<td>', '<td align=center><font face="calibri">')
                set @body = REPLACE(@body, '</td>', '</font></td>')
                set @body = REPLACE(@body, '_x0020_', space(1))
                set @body = Replace(@body, '_x003D_', '=')
                set @body = Replace(@body, '<tr><TRRow>0</TRRow>', '<tr bgcolor=#F8F8FD>')
                set @body = Replace(@body, '<tr><TRRow>1</TRRow>', '<tr bgcolor=#EEEEF4>')
                set @body = Replace(@body, '<TRRow>0</TRRow>', '')

                set @body_with_data2 = @body_with_data2 + @body + '</table></div></body></html>'

                set @body_with_data2 = '<div style="color:Black; font-size:11pt; font-family:Calibri; width:100px;">' + @body_with_data2 + '</div>'

            END

Answer 1

您可以使用电子邮件正文的td样式宽度，最大宽度和最小宽度。

<td style="width:100px;max-width:100px;min-width:100px">&nbsp;</td>

通常，max-width会覆盖width，但min-width会覆盖max-width。

Answer 2

来自table-layout

上的MDN文档

表格和列宽由table 和 col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

强调我的。

您的表格宽度为100％，因此表格将展开以填充可用空间。您不能拥有和固定列宽。如果您删除width="100%"，则应该没问题。

请参阅下面的示例，我已截断表格以强调要点。

＆＃13;

td {
        border: solid black 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 11pt;
      }

＆＃13;

<h2>Width 100%</h2>
    <div style="margin-top:20px; margin-left:5px; margin-bottom:15px; font-weight:bold; font-size:1.3em; font-family:calibri;">Title Person Name 2</div>
    <div style="margin-left:5px; font-family:Calibri;">
      <table style="table-layout:fixed;" width="100%" cellpadding=0 cellspacing=0 border=0>
        <tr bgcolor=#4b6c9e>
          <td width="60" align=center><font face="calibri" color=White><b>Column 1 Header Name</b></font></td>
          <td width="120" align=center><font face="calibri" color=White><b>Column 2 Header Name</b></font></td>
          <td width="120" align=center><font face="calibri" color=White><b>Column 3 Header Name</b></font></td>
          <td width="375" align=center><font face="calibri" color=White><b>Column 4 Header Name</b></font></td>

        </tr>
        <tr bgcolor=#EEEEF4>
          <td align=center><font face="calibri"><a href="http://linktoIDs.com/7604/">7604</a></font></td>
          <td align=center><font face="calibri">Test Person 1</font></td>
          <td align=center><font face="calibri">01/01/2017</font></td>
          <td align=center><font face="calibri">Test Description Test Description Test Description</font></td>
          
        </tr>
      </table>
    </div>

<h2>No Width</h2>

<div style="margin-top:20px; margin-left:5px; margin-bottom:15px; font-weight:bold; font-size:1.3em; font-family:calibri;">Title Person Name 2</div>
    <div style="margin-left:5px; font-family:Calibri;">
      <table style="table-layout:fixed;" cellpadding=0 cellspacing=0 border=0>
        <tr bgcolor=#4b6c9e>
          <td width="60" align=center><font face="calibri" color=White><b>Column 1 Header Name</b></font></td>
          <td width="120" align=center><font face="calibri" color=White><b>Column 2 Header Name</b></font></td>
          <td width="120" align=center><font face="calibri" color=White><b>Column 3 Header Name</b></font></td>
          <td width="375" align=center><font face="calibri" color=White><b>Column 4 Header Name</b></font></td>

        </tr>
        <tr bgcolor=#EEEEF4>
          <td align=center><font face="calibri"><a href="http://linktoIDs.com/7604/">7604</a></font></td>
          <td align=center><font face="calibri">Test Person 1</font></td>
          <td align=center><font face="calibri">01/01/2017</font></td>
          <td align=center><font face="calibri">Test Description Test Description Test Description</font></td>
          
        </tr>
      </table>
    </div>

＆＃13;

在电子邮件SQL Server HTML表中需要固定的列宽

2 个答案: