Outlook中HTML表格CSS n-th child选择器的替代方案

我用Power BI和Power Automate搭建流程，将表格以HTML形式发送至Outlook。数据本身无问题，但需要对特定列做格式化：比如前3个维度列需左对齐、设置更宽列宽，甚至添加换行。Power BI传入的行数据是动态变化的，但Outlook不支持常用的CSS n-th child选择器，请问有没有简便的替代方案？

编辑1：补充代码 #

当前代码意图是将除前4列外的所有列右对齐，该代码在W3Schools等在线工具中有效，但在Outlook中无效：

<style>
table.table2 {
  background-color: #FFFFFF;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.table2 td, table.table2 th {
  border-left: none;
  border-right: none;
}
table.table2 tr td + td + td + td +td {
 text-align: right;
}
table.table2 tbody td {
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid #4A929E;
}
table.table2 thead {
  background: #4A929E;
  border-bottom: 1px solid #FFFFFF;
}
table.table2 thead th {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: none;
}
table.table2 tfoot td {
  font-size: 13px;
}
</style>

适配Outlook的解决方案 #

Outlook对CSS复合选择器、伪类的支持极差，必须用内联样式+Power Automate动态处理列属性的方式解决，具体步骤如下：

• 直接给目标列添加内联样式
  放弃用<style>里的复杂选择器，把对齐、宽度、换行样式直接写在<th>和<td>标签里：

  • 前3个维度列的表头：<th style="text-align:left; width:200px; white-space:pre-wrap;">列名</th>
  • 前3个维度列的单元格：<td style="text-align:left; width:200px; white-space:pre-wrap;">内容</td>
  • 其余列的表头和单元格：<th style="text-align:right;">列名</th>、<td style="text-align:right;">内容</td>
    其中white-space:pre-wrap用来实现单元格内容自动换行，宽度可按需调整。

• 简化全局CSS
  保留基础的表格样式即可，删掉Outlook不支持的兄弟选择器（比如td + td + td），示例如下：

  <style>
  table.table2 {
    background-color: #FFFFFF;
    width: 100%;
    border-collapse: collapse;
  }
  table.table2 td, table.table2 th {
    border-left: none;
    border-right: none;
    font-size:13px;
  }
  table.table2 thead {
    background: #4A929E;
    border-bottom: 1px solid #FFFFFF;
  }
  table.table2 thead th {
    font-weight: bold;
    color: #FFFFFF;
  }
  table.table2 tbody td {
    border-bottom: 1px solid #4A929E;
  }
  </style>
  

• Power Automate动态处理技巧
  因为数据是动态的，可通过Power Automate的「替换文本」操作批量给列添加样式：

  1. 先用「创建HTML表格」生成基础表格代码
  2. 多次执行「替换文本」：
     • 找到第一个</th>，替换为 style="text-align:left; width:200px; white-space:pre-wrap;"></th>，处理第一列表头
     • 重复上述操作处理第二、第三列的表头
     • 同理，找到每行中前3个</td>，替换为对应的内联样式结尾标签，处理所有数据行的前3列
     • 对第4列及以后的列，批量替换</th>和</td>为带text-align:right的样式标签

内容的提问来源于stack exchange，提问作者Schinken