JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
Here the parent frame
<table border=1>
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data" />
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr data-bind="foreach: $data">
            <td>
                <span data-bind="text: $data" />
            </td>
        </tr>
    </tbody>
        
</table>
</div>

CSS

body {
  width:100%;
  background-color: #fff;
}
.frame{
        max-width: 100%; 
        display: block;
        width: 300px;
  margin:2em;
      background-color: #fcf;
        border:1px solid #885;
      
}
table {
   table-layout:fixed;
    font-size: 2em;

     max-width:100%;
     width: 100% !important;
}
table {

}
table td, table th {
    white-space: nowrap;
     overflow: hidden;
     -ms-text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
    max-width: 5em; 
}

JavaScript

var viewModel = function(first, last) {
    
    this.columns = ['row1', 'row2', 'row3', 'row4', 'row5', 'row6'];
    this.rows = [ 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                    ['cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', 'cell cell cell cell cell', ], 
                   ]; 
    
};

ko.applyBindings(new viewModel());