本文详解如何在 html 中正确实现表格居中显示、列宽控制及内容对齐，针对 t-sql 动态生成 html 表格时常见的错位、未居中、样式失效等问题，提供兼容性强、语义清晰的现代写法。
在你提供的 T-SQL 代码中，@tableHTML 是通过字符串拼接生成 HTML 的，但存在多个关键问题导致表格无法自动居中或对齐：
- ❌ 缺少外层容器样式：纯 <table> 标签默认为 display: table，宽度仅包裹内容，不会自动居中；
- ❌ width="20%" 冲突叠加：5 列 × 20% = 100%，看似合理，但浏览器会因边框、内边距、字体渲染等产生累积误差，导致换行或溢出；
- ❌ HTML 结构不完整：缺少 <html><body> 包裹，且 CAST(... FOR XML PATH('tr')...) 生成的是 <tr>...</tr> 片段，但未包裹 <td>，导致数据直接拼接为纯文本（如 'Anaplan 2024-06-15 123 89'），破坏表格结构；
- ❌ 过时写法：<font color="..."> 已废弃，应使用 CSS；border="1" 属于表现层逻辑，建议用 CSS 控制。
✅ 正确做法是：用 CSS 控制布局 + 语义化结构 + 容器级居中。以下是推荐方案：
✅ 1. 使用 CSS 实现表格居中与列对齐
<div style="text-align: center; margin: 20px 0;">
<table style="
width: 100%;
max-width: 900px;
margin: 0 auto;
border-collapse: collapse;
font-family: Arial, sans-serif;
">
<colgroup>
<col style="width: 15%;">
<col style="width: 25%;">
<col style="width: 15%;">
<col style="width: 20%;">
<col style="width: 25%;">
</colgroup>
<thead>
<tr style="background-color: #f5f5f5;">
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Date</th>
<th style="padding: 10px; text-align: left; border: 1px solid #ddd; color: black;">Interface Name</th>
<th style="padding: 10px; text-align: center; border: 1px solid #ddd; color: black;">Successful</th>
<th style="padding: 10px; text-align: center; border: 1px solid #ddd; color: red;">No of Failed Process</th>
<th style="padding: 10px; text-align: center; border: 1px solid #ddd; color: red;">Process not triggered</th>
</tr>
</thead>
<tbody>
<!-- 此处动态插入 <tr><td>...</td></tr> -->
<tr>
<td style="padding: 8px; border: 1px solid #eee;">2024-06-15</td>
<td style="padding: 8px; border: 1px solid #eee;">Sales_Import</td>
<td style="padding: 8px; text-align: center; border: 1px solid #eee;">✓</td>
<td style="padding: 8px; text-align: center; border: 1px solid #eee;">0</td>
<td style="padding: 8px; text-align: center; border: 1px solid #eee;">—</td>
</tr>
</tbody>
</table>
</div>✅ 2. T-SQL 中安全生成 HTML（修复原逻辑）
原代码中 'Anaplan'+' '+CAST(...)' 是错误拼接 —— FOR XML PATH('tr') 返回的是 <tr>...</tr>，但你未提供 <td>，且硬编码了“Anaplan”文本。正确方式应为：
-- ✅ 推荐：用 FOR XML 生成完整 <tr><td>...</td></tr> 行
SET @tableHTML =
N'<H1>Anaplan Summary Report</H1>' +
N'<div style="text-align:center;margin:20px 0;">' +
N'<table style="width:100%;max-width:900px;margin:0 auto;border-collapse:collapse;font-family:Arial,sans-serif;">' +
N'<colgroup><col style="width:15%"><col style="width:25%"><col style="width:15%"><col style="width:20%"><col style="width:25%"></colgroup>' +
N'<thead><tr style="background:#f5f5f5;"><th style="padding:10px;text-align:left;border:1px solid #ddd;">Date</th>' +
N'<th style="padding:10px;text-align:left;border:1px solid #ddd;color:black;">Interface Name</th>' +
N'<th style="padding:10px;text-align:center;border:1px solid #ddd;color:black;">Successful</th>' +
N'<th style="padding:10px;text-align:center;border:1px solid #ddd;color:red;">No of Failed Process</th>' +
N'<th style="padding:10px;text-align:center;border:1px solid #ddd;color:red;">Process not triggered</th></tr></thead>' +
N'<tbody>' +
-- ✅ 动态生成数据行（确保每行含 <td>）
CAST((
SELECT
td = CONVERT(VARCHAR(10), GETDATE(), 120), '', -- Date
td = 'Anaplan', '', -- Interface Name
td = CAST(@total_pass_count AS VARCHAR), '', -- Successful
td = CAST(@total_fail_count AS VARCHAR), '', -- Failed
td = '—' -- Not triggered
FOR XML PATH('tr'), TYPE, ROOT('root')
) AS NVARCHAR(MAX))
+ N'</tbody></table></div>';⚠️ 注意：FOR XML PATH('tr') 必须配合 SELECT td = ... 显式定义每个 <td>，否则无法生成合法表格单元格。
✅ 3. 进阶建议（提升可维护性）
- ✅ 分离样式：将内联 style 提取为 <style> 块或外部 CSS（若邮件客户端支持）；
- ✅ 响应式适配：添加 @media (max-width: 768px) 规则，让小屏下表格横向滚动或转为卡片堆叠；
- ✅ 邮件兼容性：如用于 Outlook 邮件，避免 Flex/Grid，优先使用 <table> 布局 + 内联样式（本方案已满足）；
- ✅ 语义增强：为表格添加 role="grid" 和 aria-label，提升无障碍访问体验。
总结：表格“不自动居中”不是 bug，而是 HTML/CSS 的默认行为 —— 它需要明确指令（如 margin: 0 auto + width）才能居中。始终用 div 容器控制整体定位，用 <colgroup> 统一列宽，用内联样式保障邮件环境兼容性。抛弃 <font> 和 border="1"，拥抱现代、可维护、语义化的 HTML+CSS 实践。
立即学习“前端免费学习笔记（深入）”；
