tempfile.html

    <style>
        body {display: flex; justify-content: center; margin: 0; height: 100vh; align-items: center;}
        table {border-collapse: collapse; width: 80%; margin: auto;}
        td, th {text-align: center; padding: 8px; border: 1px solid #ddd;}
        td, th {min-width: 100px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
        table {table-layout: fixed; width: auto;}
        th {background-color: #f2f2f2;}
        .grey {background-color: grey;}
        .lightgreen {background-color: lightgreen;}
        .lightcoral {background-color: lightcoral;}
        .green {background-color: green;}
        .red {background-color: red;}
        tr:hover {background-color: #f5f5f5;}
    </style>
    <table>
        <tr><th>Metric</th><th>A</th><th>B</th></tr><tr><td>Count of 'purchase' events per user.</td><td>0.28</td><td class="grey" title="P-value: 0.6401">0.40<br/>(43%)</td></tr><tr><td>Sum of 'purchase_value' for 'purchase' events per user.</td><td>53.28</td><td class="grey" title="P-value: 0.4849">91.55<br/>(72%)</td></tr><tr><td>Conversion rate to 'purchase' event per user.</td><td>0.08</td><td class="grey" title="P-value: 0.8615">0.09<br/>(13%)</td></tr></table>