用表格替换 css flex

Question

我正在使用 Flex 在报告上显示某些详细信息。但我发现电子邮件客户端不支持它，我认为它可以通过表格来实现。

这是我的代码。如何使用表格来获得相同的结果？具体来说，如果我们要使用表格，我们如何增加和减少单元格宽度？

    body {
        color: rgb(0, 0, 0);
        font-family: Helvetica, Arial, sans-serif;
        height: 100%;
        font-size: 14px;
    }
    
    div {
        display: block;
    }
    
    .divtable {
        border-top: 1px solid #eceff1;
        margin: 0 -16px;
        word-break: break-all;
    }
    
    .tablerow {
        border-bottom: 1px solid #eceff1;
        text-decoration: none;
        color: #000;
        display: flex;
    }
    
    .tablecol {
        line-height: 1.5em;
        padding: 10px 15px;
        flex: 1;
    }
    
    .bar {
        border-radius: 3px;
        background: #eee;
        display: inline-flex;
        width: 100%;
    }
    
    .text {
        display: inline-block;
        background: #04b;
        text-align: center;
        font-size: 12px;
        line-height: 18px;
    }
    
    .a {
        background: #28EB52;
    }
    .b {
        background: #F0FF0D;
    }

    <div class="divtable">
        <div class="tablerow">
            <div class="tablecol">Label</div>
            <div class="tablecol">
                <div class="bar">
                    <div class="text a" style="flex-grow: 8">8</div>
                    <div class="text b" style="flex-grow: 15">15</div>
                </div>
            </div>
        </div>
    </div>

我确实尝试过使用表格。我无法获得正确的宽度。有更好的方法吗？

(8 / (8+15)) x 100 = 34.7% (15 / (8+15)) x 100 = 65.3%

<table style="width:100%">
    <tr>
        <th style="width:25%">Label 1</th>
        <td style="text-align: center; background: #28EB52; width: 34.7%;">8</td>
        <td style="text-align: center; background: #F0FF0D; width: 65.3%;">15</td>
    </tr>
</table>
<table style="width:100%">
    <tr>
        <th style="width:25%">Label 2</th>
        <td style="text-align: center; background: #28EB52; width: 33.3%;">5</td>
        <td style="text-align: center; background: #F0FF0D; width: 33.3%;">5</td>
        <td style="text-align: center; background: #28EB52; width: 33.3%;">5</td>
    </tr>
</table>