JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-bordered">
    <tbody data-bind="foreach: { data: dataset, as: 'rowInfo' }">
        <tr style="max-height: 30px" 
            data-bind="foreach: { data: $parent.metadata, as: 'colInfo' }">
            <td>
            <div data-bind="text: rowInfo[colInfo.DataColumn],
                style: { width: Width, height: '30px' }"></div>
            </td>
        </tr>
    </tbody>
</table>

CSS

td { border: 1px solid gray; }
div { overflow: hidden; }

JavaScript

var vm = {
    metadata : {
        DataColumn: 'val',
        Width: '100px'
    },
    dataset: [
        { val: 42 }, { val: 42 }, { val: 42 }, { val: 42 }, { val: 42 }, { val: 'some very long value that wont fit in the cell because it is too large'}
        ]
};

ko.applyBindings(vm);