Incorrect percentage "padded" columns width when the table-layout is fixed

Question

I'm trying to use percentage columns (that have some paddings) with the table-layout fixed. When I do that for regular divs, everything works as expected (box-sizing in divs is content-box). All paddings are subtracted from 500px, then the rest is split in a half, so div's widths are 150px;

<div style="display:flex;flex-direction:row;width:500px">
    <div style="width:50%;padding:0px">ADSD</div>
    <div style="width:50%;padding:0px 100px">SADDS</div>
</div>

But when I do the same for a table everything works different:

<table style="width:500px;table-layout:fixed">
  <tr>
    <td style="width:50%;padding:0px">ADSD</td>
    <td style="width:50%;padding:0px 100px">SADDS</td>
  </tr>
</table>

Cells get pretty odd widths (175.812 vs 118.188). It seems that paddings are considered, but god knows how. So the question is: how are paddings are considered for percentage columns when the table layout is fixed?

There was a question about table paddings before, but it was about the table padding itself, and not its cells paddings (so it's not relevant, border-spacing doesn't help, etc.)

Answer 1

*{box-sizing:border-box} That's all you need my friend. Elements don't bound to their box. We need to give them box-sizing css for to behave properly. I hope this helps.

*{box-sizing:border-box}

Flex
<div style="display:flex;flex-direction:row;width:500px">
    <div style="width:50%;padding:0px">ADSD</div>
    <div style="width:50%;padding:0px 100px">SADDS</div>
</div>

<br>
Table
<table style="width:500px;table-layout:fixed">
  <tr>
    <td style="width:50%;padding:0px">ADSD</td>
    <td style="width:50%;padding:0px 100px">SADDS</td>
  </tr>
</table>