HTML：Outlook 未呈现正确的邮件
问题描述 投票：0回答：1
这是我的 HTML 表代码，我没有在 Outlook 桌面应用程序中获得预期的输出，但它在 Web Outlook 中为我提供了完美的输出。
我需要的预期输出：
Outlook Web 输出符合预期：
Outlook 桌面应用程序输出，非预期：
有人可以更改 html 代码吗？我想要 Outlook 桌面应用程序中的预期输出。
1个回答
0
投票
投票
如果您希望所需的布局在整个面板（包括 Outlook 实例）中呈现一致，则必须使用表格来布局您的设计，并且必须使用一组有限的 CSS，这些 CSS 应该内联分配。我不会完全重新编码您的工作，但请考虑以下 HTML。请注意，我使用的是表格，甚至是嵌套表格，样式都是内联应用的。请注意，并排放置的两个表格左右对齐，宽度为 49%。这是因为，如果您有两个宽度为 50% 的表格，则第二个表格往往会落在第一个表格的下方。发生这种情况是因为 Outlook 的某些实例将在表格周围应用边框和/或间距。设置 49% 的宽度给了他们一点回旋余地。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Heading with Underline</title>
<style>
/* Center the heading */
.centered-heading {
text-align: center;
font-size: 20px; /* Adjust the font size as needed */
}
/* Underline style */
.underlined {
text-decoration: underline;
}
/* Center the table */
.centered-table {
margin: 0 auto;
border-collapse: collapse;
}
/* Style for table heading */
th {
font-weight: bold;
border: 1px solid black;
padding: 12px;
}
/* Style for table data cells */
td {
border: 1px solid black;
padding: 2px;
}
.left-aligned-table {
float: left;
margin-right: 20px; /* Adjust margin as needed */
border-collapse: collapse;
}
.left-aligned-table th,
.left-aligned-table td {
border: 1px solid black;
padding: 2px;
}
.right-aligned-table {
float: 25;
margin-left: 20px; /* Adjust margin as needed */
border-collapse: collapse;
}
.right-aligned-table th,
.right-aligned-table td {
border: 1px solid black;
padding: 2px;
}
.container {
border: 1px solid black;
padding: 20px;
width: 900px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="centered-heading underlined">DAILY LEADERSHIP DASHBOARD</h1>
<h4 align="center"><b>04 March 2021</b></h4>
<table class="centered-table" border="1">
<tr>
<td colspan="4" align="center">Safety Report - For the Day (FTD)</td>
</tr>
<tr>
<th>Verticals</th>
<th>No. of unsafe situations</th>
<th>LTI</th>
<th>First Aid cases</th>
</tr>
<tr>
<td>Steel</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Minerals</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Port</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Agri</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>PAI</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>TIVA</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>FWB</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>FLB</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>Stryder</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>Distribution</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
</table>
<br>
<!-- Additional table aligned to the left -->
<table class="left-aligned-table" border="1">
<!-- First row (merged) -->
<tr>
<td colspan="4" style="text-align: center;">For the Day (FTD)</td>
</tr>
<!-- Row 2 (merged across columns 1-4) -->
<tr>
<td rowspan="2" style="text-align: center;">Verticals</td>
<td colspan="2" style="text-align: center;">Sales Volume</td>
<td rowspan="2" style="text-align: center;">Turnover (Rs. Cr)</td>
</tr>
<!-- Row 3 -->
<tr>
<td>UOM</td>
<td>Act.</td>
</tr>
<!-- Rows 4 to 11 -->
<tr>
<td>FWB</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>FLB</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>PAI</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>Bicycles</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>TIVA</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>Distribution**</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>Steel</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
<tr>
<td>Minerals</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
</tr>
<!-- Row 12 -->
<tr>
<td>Agri</td>
<td>Row 12</td>
<td>Row 12</td>
<td>Row 12</td>
</tr>
<!-- Row 13 (merged across columns 2 and 3) -->
<tr>
<td>TIL</td>
<td colspan="2" style="text-align: center;"> - NA - </td>
<td>Row 13</td>
</tr>
<tr>
<td colspan="8" style="text-align: left">
<h6 style="color:red">* This excludes STF sales and Eliminations<br>** Distribution numbers are unavailable on daily basis due to its ongoing ERP Migration</h6>
</td>
</tr>
</table>
<!-- Additional table aligned to the right -->
<table class="right-aligned-table" border="1">
<!-- Merged first row -->
<tr>
<td colspan="8" style="text-align: center;">For the Day (FTD)</td>
</tr>
<!-- Table headings -->
<tr>
<tr>
<td rowspan="2" style="text-align: center;">Verticals</td>
<td colspan="4" style="text-align: center;">Merged Columns 2 and 3</td>
<td colspan="3" style="text-align: center;">Merged Columns 2 and 3</td>
</tr>
</tr>
<!-- Rows -->
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
<tr>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
</tr>
<tr>
<td>Row 12</td>
<td colspan="4" style="text-align: center;">Merged Columns 2 and 3</td>
<td>Row 12</td>
<td>Row 12</td>
<td>Row 12</td>
</tr>
<tr>
<td colspan="8" style="text-align: left">
<h6 style="color:red">* This excludes STF sales and Eliminations<br>** Distribution numbers are unavailable on daily basis due to its ongoing ERP Migration</h6>
</td>
</tr>
</table>
<br>
</div>
</body>
</html>这是一个简单的 HTML 示例，旨在回答您有关布局的具体问题。还有更多需要解决的问题，例如响应式设计和适应明暗模式，但这应该可以帮助您摆脱困境。
最新问题
- 通过过滤另一个数据表来创建数据表
- 如何从 Java 中的 Type 参数获取静态值？
- 如何使用Powershell更改驱动器标签？
- Xamarin 支持 Android 14
- 如何在 BigQuery 中创建包含非必填字段的表？
- Linux 上的 C++ 调试器类似于 MS Visual Studio 的调试器？ [已关闭]
- Python 中两个比例差异的置信区间
- 当在父页面（登录）上设置另一个隐私时，在子页面（组）上设置隐私
- 使用角度材质选项卡闪烁选项卡内容
- 无法使用 <calcite-input> 组件通过 HTML 表单上传文件（“无法在 'HTMLInputElement' 上设置 'value' 属性”）
- updateSelectInput 在observeEvent 中不起作用
- 如何删除vscode片段中该行的内容
- 添加到 DotNet 8 中的 Azure Functions v4 的对象为空或 Null
- C++ 中是否有“批量移动函数”可以避免多次移动赋值，就像 std::memmove 避免多次复制赋值一样？
- 如何使mysql2中的执行/查询返回数组而不是mysql.QueryResult
- 无法覆盖 Symfony 2 请求中的 pathInfo
- 添加到现有查询后如何循环遍历自定义帖子类型
- 用 phpunit 测试树枝
- 使用 Inertia 时如何禁用 Laravel / Jetstream 中的个人团队？
- WooCommerce 类别小部件中的锚链接
© www.soinside.com 2019 - 2024. All rights reserved.