JSFiddle - React, Tailwind, and code Playground

HTML

<table class="type-a" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="a" style="background-color:#060">A</td>
        <td class="b" style="background-color:#006">B</td>
        <td class="c" style="background-color:#600">C</td>
    </tr>
    <tr>
        <td class="a" style="background-color:#060">A</td>
        <td class="b" style="background-color:#006">B</td>
        <td class="c" style="background-color:#600">C</td>
    </tr>
</table>

    <br />
    <br />
<table class="type-b" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="a" style="background-color:#060">A</td>
        <td class="b" style="background-color:#006">B</td>
        <td class="c" style="background-color:#600">C</td>
    </tr>
    <tr>
        <td class="a" style="background-color:#060">A</td>
        <td class="b" style="background-color:#006">B</td>
        <td class="c" style="background-color:#600">C</td>
    </tr>
</table>

CSS

*{margin:0; padding:0}
    .type-a .b {width: 50%; float:left;}
    .type-a .a {width:100%; float:left;}
    .type-a .c {width: 50%; float:left;}
    
    .type-b .b {width: 25%; float:left;}
    .type-b .a {width: 50%; float:right;}
    .type-b .c {width: 25%; float:left;}