JSFiddle - React, Tailwind, and code Playground

HTML

Broken table:

<table border="0" style="width:100%;border-collapse:collapse;">
    <tr style="width:100%">
        <td style="width:30px;">1</td> <!--Fixed width-->
        <td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
        <td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
        <td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
        <td style="width:80px;">Year</td><!--Fixed width-->
        <td style="width:180px;">YouTube</td><!--Fixed width-->
    </tr>
</table>

<p>Table with fixed table layout:</p>

<table id="fixed" border="0"  style="width:100%;border-collapse:collapse;">
    <tr>
        <td style="width:30px;">1</td> <!--Fixed width-->
        <td style="width:40%">Title</td> <!--Width should be 40% of the remaining space-->
        <td style="width:40%">Interpret</td> <!--Width should be 40% of the remaining space-->
        <td style="width:20%">Album</td> <!--Width should be 20% of the remaining space-->
        <td style="width:80px;">Year</td><!--Fixed width-->
        <td style="width:180px;">YouTube</td><!--Fixed width-->
    </tr>
</table>

CSS

#fixed{
    table-layout:fixed;
}
td{
    border:1px solid red;
}