似乎无法使用 css 有效地格式化表格，因为某些选择器被忽略了

问题描述 投票：0回答：1

我有一个 Power Automate 流程，它使用 Monday.com 和 Microsoft Outlook 生成有关 monday.com 中新记录的表格

我有一个简单的流程，可以触发新记录并向团队发送一封电子邮件，其中包含该记录的详细信息。

问题：我似乎无法使用 css 有效地格式化表格，因为某些选择器被忽略。例如，我正在使用的 .header 不响应宽度。 th/td 和其他选择器正在响应，只是 .header 没有响应。 ** 在下面的示例中，我注释掉了宽度属性，但尝试了大约 25 种变体。注释掉它让我相信它没有被阅读，因为宽度没有变化。 ** 样品：

<html>
<head>
    <style>
        .record-details { font-family: Arial; color: #333; }

        .table {
            border-collapse: collapse;
            width: 250px;            
            table-layout: auto;  
        }
        .header {             
            /*width: 250px; Match table width */
            font-weight: bold; 
            color: white;             
            padding: 10px;
            background-color: #000080; 
            text-align: center; 
           
        }
        th, td {
            border: 1px solid black;
            padding: 8px;            
        }              
        .label-cell {
            background-color: lightgrey;
            color: black;
            font-weight: bold;
            width: 20%;
        }
        .data-cell {            
            background-color: white; 
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="record-details">
        <div class="header">Pipeline Alert</div>
        <table>
              <!-- Add more headers as needed -->              

            </tr>
              <tr>
                <td class="label-cell">Proposal Name:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['itemName']}</td> <!-- here you add the element you want from monday.com -->
   <tr>
                <td class="label-cell">Status:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['status8&&&color&&&label']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Stretto BD Member(s):</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['bd_lead_s_&&&dropdown&&&labels']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Referral Firm(s) - Contact(s):</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['short_text&&&text&&&text']} - @{body('Get_an_item_by_ID')?['short_text21&&&text&&&text']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Debtor Counsel:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['short_text1&&&text&&&text']} - @{body('Get_an_item_by_ID')?['short_text6&&&text&&&text']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Filing Date:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['short_text11&&&text&&&text']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Jurisdiction:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['multi_select09&&&dropdown&&&labels']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Industry:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['short_text9&&&text&&&text']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell"># Debtors: </td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['__debtors&&&text&&&text']}</td> <!-- here you add the element you want from monday.com --><tr><td class="label-cell"># Noticing Parties:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['__noticing_parties&&&text&&&text']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Public?:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['true___false&&&boolean&&&state']}</td> <!-- here you add the element you want from monday.com --><tr>
                <td class="label-cell">Other Notes:</td>  <!-- here you add the title of the row -->
                <td class="data-cell">@{body('Get_an_item_by_ID')?['long_text1&&&long-text&&&text']}</td> <!-- here you add the element you want from monday.com -->
            </tr>
        </table>
    </div>
</body>
</html>

Outlook 中的结果：

期望的结果：我试图使表格标题与表格与所有其他格式保持一致。我希望它在随着窗口调整而调整的意义上是动态的，但此时将采用统一的表格。

客户想要标题位于左侧的水平表，以便需要保留，而我缺乏经验导致我找到了这个解决方案（这应该回答“你为什么这样做的问题，:)

我们使用的是 O365 Outlook v2311

谢谢您！

css outlook office365 html-email power-automate
1个回答
1
投票

我解决了这个问题。我能够创建一个 

<th>
行，使用 
colspan
，并将其样式设置为 
<th>
而不是 
class=header
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.