本文详解如何通过语义化 html、内联样式或 css 类控制表格对齐与列宽，解决动态生成表格（如 sql server 中的 `@tablehtml`）时常见的错位、宽度不均、文字溢出等问题。
在您提供的 T-SQL 代码中，问题根源并非“未自动对齐”，而是HTML 结构不完整、标签嵌套错误、内容拼接逻辑混乱，导致浏览器无法正确解析表格布局。例如：
- <th width="20%""> 存在多余引号（"），属语法错误；
- Anaplan 字符串直接拼接在 <tr> 后，未包裹在 <td> 或 <tr> 中，破坏了表格 DOM 结构；
- CONVERT(DATE, GETDATE(), 101) 仅返回日期字符串，但未包装为 <td> 单元格，更未闭合 <tr>；
- 所有数据行缺失 <tr> 和 <td> 标签，导致浏览器将纯文本渲染在表格外，造成视觉错位（如截图所示）。
✅ 正确做法是：严格遵循 HTML 表格语义结构 —— 每行必须用 <tr> 包裹，每单元格必须用 <td> 或 <th> 包裹，并确保标签成对闭合。
以下是修复后的 T-SQL 示例（兼容 SQL Server FOR XML 动态生成）：
SET @tableHTML =
N'<H1>Anaplan Summary Report</H1>' +
N'<table border="1" style="width:100%; border-collapse:collapse; font-family:Arial, sans-serif;">' +
N'<colgroup>' +
N'<col style="width:20%;">' +
N'<col style="width:20%;">' +
N'<col style="width:20%;">' +
N'<col style="width:20%;">' +
N'<col style="width:20%;">' +
N'</colgroup>' +
N'<thead>' +
N'<tr>' +
N'<th style="background:#f0f0f0; text-align:center; padding:8px;">Date</th>' +
N'<th style="background:#f0f0f0; text-align:center; padding:8px; color:black;">Interface Name</th>' +
N'<th style="background:#f0f0f0; text-align:center; padding:8px; color:black;">Successful</th>' +
N'<th style="background:#f0f0f0; text-align:center; padding:8px; color:red;">No of Failed Process</th>' +
N'<th style="background:#f0f0f0; text-align:center; padding:8px; color:red;">Process not triggered</th>' +
N'</tr>' +
N'</thead>' +
N'<tbody>' +
-- ✅ 正确生成数据行：每行 <tr>，每列 <td>
CAST((
SELECT
td = CONVERT(VARCHAR(10), GETDATE(), 101), '',
td = 'Anaplan', '',
td = @total_pass_count, '',
td = @total_fail_count, '',
td = @total_not_triggered
FOR XML PATH('tr'), TYPE
) AS NVARCHAR(MAX)) +
N'</tbody>' +
N'</table>';? 关键改进说明：
立即学习“前端免费学习笔记（深入）”；
- 使用 <colgroup> + <col> 统一控制列宽（比 width 属性更稳定）；
- 添加 border-collapse: collapse 消除默认边框间距；
- 为 <th> 设置 text-align: center 和 padding 提升可读性；
- 所有数据行通过 FOR XML PATH('tr') 自动包裹为 <tr>，内部用 td = ... 映射为 <td>（注意：SQL Server 中 FOR XML 需配合 TYPE 和显式别名 td = 才能生成正确标签）；
- 移除过时的 <font> 标签，改用现代内联样式（语义更清晰，兼容性更好）。
⚠️ 注意事项：
- 若需响应式设计（如移动端适配），建议弃用 width 内联样式，转而引入 Bootstrap 或自定义 CSS 类（如 .table { width: 100%; } .text-center { text-align: center; }）；
- 避免在 SQL 中拼接大量 HTML —— 复杂报表推荐后端（C#/Python/PHP）生成 HTML，SQL 仅负责数据查询；
- 发送邮件时，部分邮件客户端（如 Outlook）对 CSS 支持有限，优先使用内联样式，避免 class 或外部 CSS。
总结：表格对齐不是“自动发生”的魔法，而是结构严谨性 + 样式明确性的共同结果。从修正标签嵌套开始，再辅以合理的宽度控制与文本对齐，即可获得专业、稳定的表格输出。
