JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

Multiple Cells 
<table>
    <tr data-bind='foreach: {data: headers, as: "header"}'>
        
        <!-- ko if: $index() == 1 -->
          <!-- ko foreach: header -->
            <td>
             <span data-bind='text: $data'></span>
           </td>
          <!-- /ko -->
      
        <!-- /ko -->
          <!-- ko ifnot: $index() == 1 -->
        <td>
            <span data-bind='text: header'></span>
        </td>
          <!-- /ko -->
    </tr>
</table>

Multiple Spans Within 1 cell
<table>
    <tr data-bind='foreach: {data: headers, as: "header"}'>
        
        <!-- ko if: $index() == 1 -->
           
            <td data-bind='foreach: header'>
             <span data-bind='text: $data'></span>
           </td>
          
      
        <!-- /ko -->
          <!-- ko ifnot: $index() == 1 -->
        <td>
            <span data-bind='text: header'></span>
        </td>
          <!-- /ko -->
    </tr>
</table>

CSS

td{
    border: black 3px solid;
    padding: 5px
}

span { 
 background-color: #8F8F8F;
    padding : 2px;
}

JavaScript

var vm  = {
    headers: ["Header Front", ["1", "2", "3"], "Header Last"]
}

ko.applyBindings(vm)