html - Outlook HTML 中的表格宽度问题

标签 html css web outlook

我不是 UI 专家,只是创建一个简单的 HTML 页面来显示 outlook 中数据库表中的日志。几行有异常详细信息,它似乎覆盖了表格宽度属性。有人建议我使用内联样式,但似乎也无济于事。

如有任何帮助,我们将不胜感激。 (试了100多种方法都崩溃了)

我是不是漏掉了什么。以下是截图和 html 供您引用。  to

HTML代码:

    <?xml version="1.0" encoding="UTF-8"?><html xmlns:tns6="http://dewa.gov.ae/SmartGrid/xsd/Logger_v1_0_0_0.xsd" xmlns:tib="http://www.tibco.com/bw/xslt/custom-functions"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>        

h2{
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: black;

}







                </style>
</head>
<body>
<h2>LogData</h2>
<table border="0" bgcolor="#fff" cellpadding="0" cellspacing="0" width="300" height="100%">
<tbody>
<tr>
<th style="margin:0 auto;  border: 1px solid black;">UUID</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
2821d9cc-e9c4-4823-86d0-6f88944ec488</td>
</tr>
<tr>
<th style="margin:0 auto;  border: 1px solid black;">InterfaceId</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
11111</td>
</tr>
<tr>
<th style="margin:0 auto;  border: 1px solid black;">ApplicationName</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
adadfadsfsf</td>
</tr>
<tr>
<th>ComponentName</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
adadfadsfsf</td>
</tr>
<tr>
<th>SourceApplicationName</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
adadfadsfsf</td>
</tr>
<tr>
<th>TargetApplicationName</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
adadfadsfsf</td>
</tr>
<tr>
<th>Message</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
adadfadsfsf</td>
</tr>
<tr>
<th>EngineName</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
adadfadsfsf</td>
</tr>
<tr>
<th>TransactionTimeStamp</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
2019-12-08T16:29:04.408&#43;04:00</td>
</tr>
<tr>
<th>TimeStamp</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
2019-12-08T16:29:04.408&#43;04:00</td>
</tr>
<tr>
<th>Exception</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;tns:logdata xmlns:tns=&quot;http://dewa.gov.ae/SmartGrid/xsd/Logger_v1_0_0_0.xsd&quot; xmlns:tib=&quot;http://www.tibco.com/bw/xslt/custom-functions&quot;&gt;&lt;tns:logdata&gt;&lt;tns:uuid&gt;cac7e8c7-5b76-4f54-a193-a4230c7a4ba2&lt;/tns:uuid&gt;&lt;tns:interfaceid&gt;11111&lt;/tns:interfaceid&gt;&lt;tns:applicationname&gt;adadfadsfsf&lt;/tns:applicationname&gt;&lt;tns:componentname&gt;adadfadsfsf&lt;/tns:componentname&gt;&lt;tns:sourceapplicationname&gt;adadfadsfsf&lt;/tns:sourceapplicationname&gt;&lt;tns:targetapplicationname&gt;adadfadsfsf&lt;/tns:targetapplicationname&gt;&lt;tns:message&gt;adadfadsfsf&lt;/tns:message&gt;&lt;tns:enginename&gt;adadfadsfsf&lt;/tns:enginename&gt;&lt;tns:transactiontimestamp&gt;2019-12-05T12:22:17.901&#43;04:00&lt;/tns:transactiontimestamp&gt;&lt;tns:timestamp&gt;2019-12-05T12:22:17.901&#43;04:00&lt;/tns:timestamp&gt;&lt;tns:logtype&gt;INFO&lt;/tns:logtype&gt;&lt;/tns:logdata&gt;&lt;/tns:logdata&gt;</td>
</tr>
<tr>
<th>LogType</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
INFO</td>
</tr>
<tr>
<th>EventPayload</th>
<td bgcolor="#fafafa" width="150" style="margin:0 auto;  border: 1px solid black;" align="left" height="100%">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;tns:logdata xmlns:tns=&quot;http://dewa.gov.ae/SmartGrid/xsd/Logger_v1_0_0_0.xsd&quot; xmlns:tib=&quot;http://www.tibco.com/bw/xslt/custom-functions&quot;&gt;&lt;tns:logdata&gt;&lt;tns:uuid&gt;cac7e8c7-5b76-4f54-a193-a4230c7a4ba2&lt;/tns:uuid&gt;&lt;tns:interfaceid&gt;11111&lt;/tns:interfaceid&gt;&lt;tns:applicationname&gt;adadfadsfsf&lt;/tns:applicationname&gt;&lt;tns:componentname&gt;adadfadsfsf&lt;/tns:componentname&gt;&lt;tns:sourceapplicationname&gt;adadfadsfsf&lt;/tns:sourceapplicationname&gt;&lt;tns:targetapplicationname&gt;adadfadsfsf&lt;/tns:targetapplicationname&gt;&lt;tns:message&gt;adadfadsfsf&lt;/tns:message&gt;&lt;tns:enginename&gt;adadfadsfsf&lt;/tns:enginename&gt;&lt;tns:transactiontimestamp&gt;2019-12-05T12:22:17.901&#43;04:00&lt;/tns:transactiontimestamp&gt;&lt;tns:timestamp&gt;2019-12-05T12:22:17.901&#43;04:00&lt;/tns:timestamp&gt;&lt;tns:logtype&gt;INFO&lt;/tns:logtype&gt;&lt;/tns:logdata&gt;&lt;/tns:logdata&gt;</td>
</tr>
</tbody>
</table>
<br>
<hr>
<font face="Arial" color="Black" size="1"><br>
Our Vision: A globally leading sustainable innovative corporation.<br>
<p>Our Mission: We are committed and aligned to Dubai’s 8 Principles and 50-Year Charter supporting the UAE’s directions through the delivery of global leading services and innovative energy solutions enriching lives and ensuring the happiness of our stakeholders
 in a sustainable manner.<br>
</font></p>
<hr>
<font face="Arial" color="Green" size="1"><br>
Please consider the environment before printing this email.<br>
<p></p>
</font>
</body>
</html>

最佳答案

最后通过将以下样式添加到 <table> 来修复它和 <td>

 <table bgcolor="#fff" border="0" cellpadding="20" cellspacing="0" height="100%" width="auto" style="table-layout: fixed;">

<td align="left" height="100%" width="800" style="margin:5 auto;  border: 1px solid black;border-collapse: collapse;word-break:break-all;font-family:arial;font-size:8px;background-color: #f2f2f2;">   

关于html - Outlook HTML 中的表格宽度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59235460/

相关文章:

android - 如何将Web应用程序转换为移动应用程序?

html - IE 和 Chrome inline-block css 不同的行为

javascript - 没有鼠标事件的图像动画Jquery

javascript - 单击导航栏外部时如何关闭折叠栏?

python - 浏览器不在后续请求中发送 cookie

ruby-on-rails - 基于 Ruby on Rails 的个人网站 CMS

javascript - 播放中的 HTML5 视频火灾事件(暗淡页面)

javascript - CSS Transition - 顺利显示div

javascript - 使用 PDF.js 链接、超链接到 Canvas

html - CSS 购物车下拉菜单