how to initialize w2ui grid column width to content?

$( document ).ready(function() {
    console.log( "ready!" );
    var records = [];
    var record1 = {
        recid: 1,
        strategy: "high/low",
        backtest: "v1",
        num_trades: 273,
        num_winners: 70,
        num_losers: 203
    };
    records.push(record1);
    var record2 = Object.assign({},record1);
    record2['recid']=2;
    record2['backtest']="v2";
    records.push(record2);    
    addStrategiesTable(records);
});

function addStrategiesTable(records) {
     $('#grid2').w2grid({
        name: 'grid2',
        header: 'Strategies',
        sortData: [
            { field: 'strategy', direction: 'desc' },
            { field: 'backtest', direction: 'desc' },
            { field: 'num_trades', direction: 'desc' },
            { field: 'num_winners', direction: 'desc' },
        ],
        columns: [
            {
                field: 'strategy',
                caption: 'Strategy',
                size: '100px',
                sortable: true
            },
            {
                field: 'backtest',
                caption: 'Backtest',
                sortable: true
            },
            {
                field: 'num_trades',
                caption: 'Num Trades',
                sortable: true
            },
            {
                field: 'num_winners',
                caption: 'Num Winners',
                sortable: true
            },
            {
                field: 'num_losers',
                caption: 'Num Losers',
                sortable: true
            }
        ],
        records: records
    });
}
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>

I have a w2ui grid that is not behaving on initialization. It has 20 columns. When I refresh the browser, this is what I see:

It shows only 2 columns and 1 row, plus the table header only goes about half way, even though the table is set to almost 100%. I can see the border of the table stretching to that distance, but not the content. The two columns it does show are squashed together.

If I click on one of the column headers, then everything shows up correctly!

Here is the html:

   <div id="grid2" style="position:absolute; left:8px; right:8px; height: 400px;"></div>

The grid columns are set in javascript like this:

columns: [
    {
        field: 'strategy',
        caption: 'Strategy',
        sortable: true
    },
    plus 19 more

Any suggestions to fix this?

I tried to create a code snippet (above) that shows the issue but it just shows a barebones table with none of the w2ui functionality.

from how to initialize w2ui grid column width to content?