Knockout - self closing <td/>

http://stackoverflow.com/questions/9150106/knockoutjs-containerless-control-flow-binding-td-in-table

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
UL is here
<ul>
<!-- ko foreach: rowObjects -->
    <li>
        <span data-bind="text: chid"></span>
        <span data-bind="text: chname"></span>
        <!-- ko foreach: numbers -->
        <span data-bind="text: $data" class="colored"></span>
        <!-- /ko -->
    </li>
<!-- /ko -->
</ul>        

<br/>

<br/>
<span data-bind="text: name"></span>
<table>
    <tbody>
        <!-- ko foreach: rowObjects -->
        <tr>
            <td data-bind="text: chid"></td>
            <td data-bind="text: chname"></td>
            <!-- ko foreach: numbers -->
            <td class="colored"><span data-bind="text: $data"></span></td>
            <!-- /ko -->
    
        </tr>
        <!-- /ko -->
        <!-- /ko -->
    </tbody>
</table>
<table>
  <tbody data-bind="foreach:{ data: rowObjects, as: 'obj' }">
  <tr>
       <td data-bind="text: obj.chid"></td>
      <td data-bind="text: obj.chname"></td>
   </tr>
 </tbody>
</table>

CSS

td{
    padding: 5px;
}
.colored{
    background-color: yellow;
}

JavaScript

function rowObject() {
    this.chid = 100;
    this.chname = 'child';
    this.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}

function masterVM() {
    this.id = 1;
    this.name = 'Table Thingy';
    this.rowObjects = ko.observableArray([new rowObject(), new rowObject(), new rowObject()]);
}

ko.applyBindings(new masterVM());