Knockout.js containerless "foreach" not working with <table>

knockout.js, syntax

Solution

This is related to the fact that browsers insert `tbody` tags automatically, which creates a mismatch in the comments. The rendered output will look like:

<table>
  <!-- ko foreach: MyPlans -->
  <tbody>
    <tr>
      <td>Test</td>
    </tr>
  <!-- /ko -->
  </tbody>
</table>

Steve did put some work into trying to correct mismatched tags in KO, but the easiest thing for you to do is either add the `tbody` yourself or add the `tbody` and put your binding on it.

<table>
  <tbody data-bind="foreach: MyPlans">
    <tr>
      <td>Test</td>
    </tr>
  </tbody>
</table>

It is legal for a table to have multiple `tbody` tags, if necessary.

Problem

This code throws the error (in Chrome): "Cannot find closing comment tag to match: ko foreach: MyPlans": ``` <table> <!-- ko foreach: MyPlans --> <tr> <td>Test</td> </tr> <!-- /ko --> </table> ``` If I use a list instead, everything works: ``` <ul> <!-- ko foreach: MyPlans --> <li> Test </li> <!-- /ko --> </ul> ``` I would like to use the containerless foreach with a table. Is there something I'm doing wrong? Is it a bug?

Original source