header row in knockout - html

Question

I want to have some HTML like the following:
<table>
<tbody>
<tr data-bind="foreach: foo">
<td>some header</td>
<td data-bind="value: bar"></td>
</tr>
</tbody>
</table>
I want repeated cells generated by a Knockout foreach binding. But how can I do this while having a header cell which I don't want repeated? The desired output, after binding, is something like:
<table>
<tbody>
<tr>
<td>some header</td>
<td>fred</td>
<td>wilma</td>
<td>barney</td>
<td>bam-bam</td>
</tr>
</tbody>
</table>
The same question applies to having a header row. If the foreach binding is on the <tr> element, how do I tell Knockout not to repeat the first row or cell?

Answer 1

You can use the containerless version of the binding ( see in the documentation: Using foreach without a container element section)
<table>
<tbody>
<tr>
<td>some header</td>
<!-- ko foreach: foo -->
<td data-bind="text: bar"></td>
<!-- /ko -->
</tr>
</tbody>
</table>
Demo JSFiddle.
So the same technique can be used if you want to have a fixed header row:
<table>
<tbody>
<tr>
<td>some header</td>
</tr>
<!-- ko foreach: foo -->
<tr>
<td data-bind="text: bar"></td>
</tr>
<!-- /ko -->
</tbody>
</table>

Answer 2

You can use this
<table>
<tbody>
<tr>
<td>Some header</td>
<!-- ko foreach: foo -->
<td data-bind="value: bar"></td>
<!-- /ko -->
</tr>
</tbody>
</table>
To repeat tr you can use same desicion, but it better to use html possibilities
<table>
<thead>
<tr>
<td> Header </td>
</tr>
</thead>
<tbody>
<tr data-bind="foreach: foo">
<td data-bind="text: bar"></td>
</tr>
</tbody>
</table>