JSFiddle - React, Tailwind, and code Playground

by johni

HTML

<table class="myTable">
    <tr>
        <td class="first">width:300px;</td>
        <td class="second autoWidth">auto/divide</td>
        <td class="third autoWidth">auto/divide</td>
        <td class="last">width:50px;</td>
    </tr>
    <tr>
        <td class="first">width:300px;</td>
        <td class="second autoWidth">auto/divide</td>
        <td class="third autoWidth">auto/divide</td>
        <td class="last">width:50px;</td>
    </tr>
</table>

CSS

table.myTable
{
    width:100%;
}

.myTable td
{
    border: solid 1px #cecece;
}

.myTable td.first
{
    width:300px;
}

.myTable td.last
{
    width:50px;
}

JavaScript

$(document).ready(function() {
    DesignMyTable(".myTable", "myTable td.first", "myTable td.last", "myTable td.autoWidth")
});



function DesignMyTable(_myTable, _myFirstFixedCell, _mySecondFixedCell, _myAutoWitdhCell) {
    // get the width of your table
    var myTableWidth = $(_myTableSelector).width();
    // get fixed width of cells that will not change
    var firstAndLastWidth = $(_myFirstFixedCellSelector).width() + $(_mySecondFixedCellSelector).width();
    // count the number of cells that their size must be shared
    var noOfAutoWidthColumns = $(_myAutoWitdhCellSelector).size();
    // get the width for each cell
    var autoWidthColumn_Width = (myTableWidth - firstAndLastWidth) / noOfAutoWidthColumns;
    // set the width of each cell
    $(_myAutoWitdhCellSelector).css({"width" : autoWidthColumn_Width + "px"})
}